Vuex的使用方法
什么是vuex
vuex是专门为vue.js设计的集中式状态管理架构。状态？我们理解为在data中的属性需要共享给其他vue组件使用的部分就叫做状态，简单的说就是data需要公用的属性。
vue项目中的父子组件的交互是单通道传递，父组件通过props向子组件传递参数，而在子组件中不能直接修改接收的参数，而是需要自定义方式
Vuex的mutation，getters和actions的使用
1.state用来存储数据
2.mutations：用来异步调用mutations中传递过来的数据
在vue 中，只有mutation 才能改变state. mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，
3.actions:异步的步骤操作，操作mutations中传递过来的数据
actions可以说是mutation的加强版，它可以通过commit mutations中的方法改变状态，最重要的是它可以进行异步操作，在组件中通过$store.dispatch来触发action中定义的方法。
今天是要来说一下action函数的参数{commit}
是代表了什么，又是怎么来的。下面就来说一下，action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：
context:{
state, 等同于store.$state，若在模块中则为局部状态
rootState, 等同于store.$state,只存在模块中
commit, 等同于store.$commit
dispatch, 等同于store.$dispatch
getters 等同于store.$getters
}常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的
位置写自己想要的属性，如：{commit}。
4.modules：
在state中数据过多使用，类似于父组件和子组件之间的关系，只不过是需要index.js中用import引入调用的定义js文件罢了（如：cart.js）
5.getter
有的组件中获取到 store 中的state, 需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
store.js:
export default new Vuex.Store({
state,
getters:{
count:function(state){
return state.count += 100;
}
},
mutations:{
switch_color(state){
state.show = state.show?false:true
},
add(state){
state.count += 1;
},
reduce(state){
state.count -= 1;
}
},
actions:{
addPlus({commit}){
commit('add')
},
reducePlus({commit}){
commit('reduce');
}
}
})
page.vue:
<template>
<div>
<div>{ {$store.getters.count}}</div>
<input type="button" @click="$store.dispatch('addPlus')" value="+">
</div>
</template>
<script>
import store from '../store/store'
export default {
}
</script>
注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。