Vuex状态管理

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。(可以当成全局对象理解。)

2.Vuex 和单纯的全局对象有两点不同：
1、Vuex 的状态存储是响应式的
2、改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

3.Vuex的核心是store，store包含着应用中大部分的状态 (state)。

4.一个最简单的store包含state与mutation，可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更

5.重点强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让我们的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。

6.【读数据】State:存储着应用中的所有基础“全局对象”，this.$store.state.XXX可访问到。
mapState：使用此辅助函数帮助我们生成计算属性，获得多个state值。

7.【读数据】Getter：从 store 中的 state 中派生出一些状态。
Getter 接受 state 作为其第一个参数。第二个参数可传值计算。
Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值。
mapGetters 辅助函数同mapState思想理解。

8.【改数据】Mutation：
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）。
还有一条重要的原则就是要记住 mutation 必须是同步函数

9.【改数据的提交】Mutation
在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
10.【写法】Mutation
使用常量替代 Mutation 事件类型。

11.【改数据】Actions
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 通过 store.dispatch 方法触发.
在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用。

12【Module】
应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。

如有疑问请添加我的微信号：18231133236。欢迎交流！
更多内容，请访问的我的个人博客：https://www.liugezhou.online.
您也可以关注我的个人公众号：【Dangerous Wakaka】

wechatDangerous.jpg