仅一篇vuex使用说明手册

450 阅读3分钟

写在最前——如果你是初学者

记住一句话:vuex是个存数据的仓库。使用场景是:我们可以在任何地方可以拿出来使用,可以改变它再放进去,想用的时候然后再拿出来使用,如此。

附上官网链接:很久以前我也不喜欢看官方文档,包括现在。

具体使用场景:开发过程中,我们经常会遇到一个状态可能会在多个组件之间使用,比如我们在做项目时使用到的用户的信息,什么昵称、头像这些,这些信息会在不同的组件用到,一旦改变这些状态,我们希望其他组件也跟随变化,比如用户充值了100元,或者改变了昵称,所以这个时候就需要状态管理模式来集中管理,关于Vuex的详细介绍可以移步到官网。

一、使用vuex前提:

  1. 已安装vuex依赖:npm install --save vuex

  2. 首先在src文件夹下创建store文件夹,在store文件下创建index.js文件,写入如下code:

import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) //使用vuex

export default new Vuex.Store({
    state: { 
        // state 类似 data
        //这里面写入数据
    },
    mutations:{ 
        // mutations 类似methods
        // 写方法对数据做出更改(同步操作)
    },
    getters:{ 
        // getters 类似 computed 
        // 在这里面写个方法
    },
    actions:{
        // actions 类似methods
        // 写方法对数据做出更改(异步操作)
    }
})

export default store
  1. 在入口文件main.js下引入vuex并暴露出来
//main.js内部对store.js的配置
import store from '"@/store/index.js' 

new Vue({
  el: '#app',
  router,
  store,//并暴露出来
  render: h => h(App)
})

写在中间———虽然你还不是很懂vuex,但是你已经会配置并且成功一半

二、数据的仓库state和工具人mutations

简单使用vuex,工具人把state拿出来改变它的状态

//先在vuex里面定义一个data
export default new Vuex.Store({
    state: { 
        count:0
    },
    mutations:{ 
       increment(state) { // 变更状态的方法
          state.count++; 
       }
    }
})

第一种使用mutations的方式:this.$store.commit()

//在组件里面拿出来并赋值给temp
const temp = this.$store.state.count 

//改变他并放回去,以commit(type,[payload])的形式提交,官方称此为以载荷形式提交。
this.$store.commit('increment',temp) 

//此时已经改变了count的状态,下次再拉出来值为1
console.log(this.$store.state.count)->1

第二种使用mutations的方式:辅助函数————mapState

这个方法很重要也很实用,有时候需要获取多个状态,但是使用计算属性会调用多次,显得麻烦,这里借助mapState方法来获取state。 使用mapState需要引入该方法

//在使用组件中引入
import { mapState } from 'vuex';
//使用了展开运算符..., 然后就可以在方法中直接this.count获取状态
computed: {
  // 返回多个你可以这样写...mapState(['count', 'firstName', 'lastName'])
  ...mapState(['count'])
},

三、包装器Getter和辅助函数mapGetters

getter相当于vue计算属性,只对state中的数据进行包装形成新的数据,不会修改原数据。当state中的数据变化时,getter中的数据也发生变化,响应式的

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    showCount: state => {
        return '当前count为' + state.count + '!'
    }  
  }
});

第一种使用getters的方式:

//也可以直接在插值表达式中用
this.$store.getters.名称

第二种使用getters的方式:

//组件中使用
import { mapGetters } from 'vuex'

computed:{
    ...mapGetters(['showCount'])
}

四、mutations派生的兄弟:acticons和mapActions

actions是异步操作vuex里面的数据,不能单独像mutations一样直接变更数据状态,必须通过mutation里面的方法间接改变数据的状态

第一种触发actions的方式: this.$store.dispatch()

//vuex
export default new Vuex.Store({
    state: { 
        count:0
    },
    mutations:{ 
       increment(state) { // 变更状态的方法
          state.count++; 
       }
    },
    actions:{
        addAsync(context,step){
            //引用mutations中的方法,step是接收的参数
            context.commit('increment',step)
        }
    }
})
//组件中触发action
methods:{
    handle(){
        //调用dispatch函数,触发时携带参数
        this.$store.dispatch('addAsync',5)
    }
}

第二种触发action的方式:将指定的action函数,映射为当前组件的methods函数

//vuex内容就不写了,跟上面一致
<script>
 import {mapActions} from 'vuex'
 
 ...//这里省略了data喔
 
 methods:{
    //映射为内部函数
    ...mapActions(['addAsync']),
    //某个按钮的点击事件
    btnHandle(){
        //直接使用;相当于调用了vuex中actions里面的addAsync方法,该方法又调用了mutations中的increment方法
        this.addAsync()
    }
 }
 
 
</script>

写在最后——如果你看完了

这是一篇个人理解,具体使用一定要亲自去实践,经验尚浅,若有欠缺,倔友们一定要指出来。