Vuex

整理目的：

• 了解 Vuex 的基本特性。
• 了解 Vuex 的使用方法。
• 了解 Vuex 的基本原理。

Vuex 的基本特性

Vuex 的组成部分：

• state：响应式数据。
• getter：计算属性。
• mutation：同步执行。修改 state 的唯一途径。
• action：包含异步操作，不能直接修改 state，需要通过 mutation 实现。
• module：对状态管理的模块化管理。

从组成部分和各个部分的特性来说， Vuex 是依然可以理解为一个规范的状态管理器，而且这些规范包括对数据的使用模式、对数据的操作模式、对异步操作的管理模式。

通过这些规范实现了 Vuex 单向数据流的设计理念。

结合这个模式合理的应用则可以降低项目的耦合度，提高代码的可读性。

Vuex 提供的周边生态：

• 插件，与调试相关，包括生成快照。
• 单元测试。
• 热重载。

使用 Vuex

使用 state

• 将 store 注入到根 vue 对象中。
• 通过 get 将 store.state 或者某个属性注入到某个组件的计算属性中。
• 通过 mapState 方法将属性注入到计算属性各种。

使用 getter

• 将 getter 作为普通计算属性使用，此时 getter 可以缓存结果，用法同 store.state。
• 将 getter 作为方法使用，此时 getter 将无法缓存结果。

使用 mutation

• store.commit('name',payload):payload 非必选，可以是对象也可以是字符串。
• 使用常量（枚举）做 mutation 的名字。
• mutation 必须是同步函数。

关于为什么 mutation 一定要是同步函数，是和 devtool 有关的。官网描述为：每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。暂时还不理解，需要后续了解 devtool 的原理后注意这块知识。

使用 action

• 使用 store.dispatch('action'，payload) 来分发事件。
• 可以通过 mapActions 将事件注入到 vue 对象的 methods 中，实现通过 this.action 的方式调用。

使用 module

• 对 module 的使用需要注意命名空间的问题。
• 需要注意 module 中 getter、mutation、action 的参数问题。
• 需要注意带命名空间的调用方式。
• store.modules 的注册方式分为两种，静态注入+动态引用。
• 模块重用问题，提供了类似于vue组件中 函数式 data 的方案。
• 保留 state 的问题：提供了 preserveState 方法归档 state 。

Vuex 的基本原理

响应式

Vuex 通过 Vue 的响应式来实现对 state 的动态监听 和 getter 的计算属性效果。

store._vm = new Vue({
  data:{
    $$state:state
  },
  computed,
})

mutation、action

Vuex 中 mutation 必须同步的原因也在于源码中对插件的支持部分，如果使用异步则属于不符合规范，导致插件无法正常生效。

this._subscribers.forEach(sub=>sub(state,payload))

module

对 module 的实现则是将 module.state 根据指定规则合并到 store.state 中。