vuex 学习笔记

1、store的commit和dispatch区别

this.$store.commit('toShowLoginDialog', true);

this.$store.dispatch('toShowLoginDialog',false);

主要区别是：

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)

commit：同步操作，写法：this.$store.commit('mutations方法名',值)

2、mutations里面的方法名都用大写以示区分

USERS:(state,value)=>state.users=value

mutations里面的方法用store.commit() 触发，mutation必须同步执行

3、actions里面是用来提交mutations里面的方法的

getUsers({commit}){
getData({},publicApi.getAllModuleEnmu).then(function(d){
  if(d.code==='0'||d.code===0){
   const dt=JSON.parse(JSON.Stringify(d.data))
   commit('USERS',dt)
   }
})
}

actions里面的方法通过store.dispatch()触发，我们可以在actions里面执行异步

Action 函数接受一个 context 参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性，但是他们并不是同一个实例

4、modules

里面的state是受命名空间限制的，要访问store中的数据必须this.$store.modules名字.name,

但是模块中的mutations和getters就不受命名空间的限制，直接this.$store.dispatch('方法名'，value)

但是里面的参数还是模块中的命名空间对象的参数

store文件里有一个index.js文件，在这里面引入模块名

然后导出一个对象来存放这些数据，该对象引入模块即可，其他state,mutations,getters都为空对象，。

5、其实actions, mutations, getters, 也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性：

在当前的模块的js中添加namespaced：true即可

export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters
}