vuex 小总结

vuex: 模块化管理（单一状态树 store.js）

本文案例：https://github.com/leftHandCat/vuex-modules

API:

1. state: 存储状态和数据的变量
2. gatter: 依赖 state 的数据做处理后的返回变量，不直接修改 state
3. mutation: 事件，唯一可以修改 state 的地方，同步

4. action: 事件,类似 mutation, 不能直接修改 state 可异步， commit 提交 mutation 再修改 state, 也可单独使用。vue 文件里面 store.dispatch 提交 action, action 返回处理函数 Promise, 可以 then, 处理后面的操作

   store.dispatch('increment').then(...)

5. modules: 分多个子模块，集中到一个大对象中, 例如：

   export default new Vuex.Store({    state,    getters,    mutations,    actions,    modules:{        goods,        shoppingcar    }})

一、在 vue 中如何使用 state, gatter, mutation, action, modules

这里只介绍 mapState,mapGetters,mapMutations,mapAction: 可以 对象 或 数组(与组件中使用名称相同) 的格式

1-1： state, gatter 在计算属性中返回
不同点： state 需要指定子模块名称

computed: {        ...mapState({            'productList': (state) => state.goods.productList         }),        ...mapGetters([            'totalQty'        ])     }

1-2： mutation, action 在事件中返回

methods: {        ...mapActions([                'qty_cut',                'qty_add',                'del_car_item'            ]),        ...mapMutations({            buyToCart: 'buyToCart'        })     }

1-3： modules: 组件中只有在 state 中需要指定子模块。vuex 中在一个子模块中使用另一个子模块的状态, 需要通过参数 rootState, 从根级查找。
参考 Api 文档： https://vuex.vuejs.org/zh-cn/api.html
但是, vuex 中只有 gatter 和 action 才有这个参数属性

注：action 的 context 包含很多属性 commit, dispatch, getters, state, rootState, gatter, rootGatter
结论：可以在子模块中任意使用其他子模块的一切状态和方法。(比较强大)