Vuex事件处理机制

Vuex的五个核心属性

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

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

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

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

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

Vuex的事件处理机制

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

1. vue.js 通过 store.dispatch–>val–>vuex / actions
2. vuex / actions / store.commit(‘a事件’,val)–> val–>mutations/ a事件(val){ }
3. mutations/ a事件(val){ } -->val–>赋值给state中的属性值