-
state
- state是vuex的唯一数据源，是所有组件的公共data
-
…mapState辅助函数
- 如果需要获取多个state，可使用…mapState辅助函数
- 因为一般是用this.$store.state.xxx来获取某个属性，所以这种就是为了获取多个state属性，然后直接拿来用
-
getters
- getters用于从state中派生出一些状态，例如对列表进行过滤等。可以将getters理解为计算属性computed，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
- getters接受state作为其第一个参数
- 得到getter处理后的值this.$store.getters.Fuc
- 如果需要使用多个getters，可使用…mapGetters辅助函数
-
mutation
- 更改vuex的store中的状态的唯一方法是提交mutation。
- vuex中的mutation类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数（payload为第二个参数，也就是自定义参数）。
//在此我们给store添加一个mutation属性reducePrice，用于将商品价格减少payload
// store.js
mutations: {
reducePrice: (state, payload) => {
return state.productList.forEach((product) => {
product.price -= payload;
})
}
}
- 组件里的调用
methods: { reducePrice(){ //之前也见过把这句话封装在action里的写法，chartFun this.$store.commit('reducePrice', 4) } } -
辅助函数…mapMutations
- 注意这个放在method里 ``` //eg methons: { …mapMutations([ ‘reducePrice’ ]) }
```
action
- action类似于mutation，不同之处在于：
- action提交的是mutation，而不是直接变更状态。
- action可以包含异步操作，而mutation不行。
- actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象.
-
action通过store.dispatch方法触发，mutation通过store.commit方法提交。
// store.js
actions: { // 提交的是mutation，可以包含异步操作
reducePriceAsync: (context, payload) => {
setTimeout(()=> {
context.commit('reducePrice', payload); // reducePrice为上一步mutation中的属性
},2000)
}
}
//组件中调用
methods: {
reducePriceAsync(){
this.$store.dispatch('reducePriceAsync', 2)
},
}
moudle 是在大型项目中将vuex分成模块
参考：https://www.jianshu.com/p/01a20b256287
