Vuex事件处理机制

1.首先回顾一下Vuex的五个核心属性

state：

单一状态数，在这里定义我们所需要的数组，对象，字符串等，这样在vue组件中才能获取你定义的这个对象的状态。直接使用就是store.state.属性名， 映射引入mapState,在计算属性中展开（...mapState(['属性名']）直接插值表达式使用即可

getters：

类似于vue的计算属性，需要返回值，当我们需要从state中派生出一些状态，就需要使用getters,getters中定义的函数第一个参数是state，只有getters中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。  直接使用store.getters.方法名， 映射引入mapGetters,在计算属性中展开（...mapGetters(['fn']）直接插值表达式使用即可

mutations:

更改state中状态的唯一方法就是提交mutations，类似vue中的methods，定义的函数第一个参数是state，使用时需要在vue.js中执行this.$store.commit（'方法名',传给vuex的具体值）,或者使用映射的方法，在vue.js中引入vuex中的mapMutations,并且在methods中展开，之后直接使用即可。

需要注意的是这里面的函数必须是同步执行。

actions：

它需要将事件提交到mutations的方法中，定义的函数的第一个参数是store，通过store.commit将事件提交到mutations中，使用时要在vue.js中执行this.$store.dispach（'方法名',传给vuex的具体值）,或者使用映射的方法，在vue.js中引入vuex中的mapActions,并且在methods中展开，之后直接使用即可。

actions中可以执行任何异步操作，是不能直接操作state中的数据，需要通过mutations

module:

解决了当state中很复杂臃肿的时候，它可以将state分割成模块，每个模块中拥有自己state,mutations,actions,getters

Vuex的事件处理机制

总的步骤：

vue.js中通过store.dispatch将值传递给vuex中的actions属性，actions中通过store.commit，将值传递给mutations的某个处理函数中，然后通过mutations改变state的状态值

①vue.js 通过  store.dispatch==>val==>vuex / actions

②vuex / actions /  store.commit('a事件',val)==>val==>mutations/  a事件(val){  }

③mutations/  a事件(val){  } ==>val==>赋值给state中的属性值