vuex

参考链接 https://vuex.vuejs.org/zh-cn/

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

image

store

1、每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化
3、从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
4、通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

state

mapState 辅助函数两种用法(mapState 函数返回的是一个对象)：

1、mapState参数是个对象：
computed: ｛
    ...mapState({
        count: state => state.count
    })
｝
2、当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
computed: {
    mapState([
          // 映射 this.count 为 store.state.count
         'count'
    ])
}

getters

getters可以接收两个参数，state 和其他的getter
你也可以通过让 getter 返回一个函数，来实现给 getter 传参。getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性, 用法类似于mapState

Mutation(必须是同步函数)

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。你需要以相应的 type 调用 store.commit 方法。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

提交载荷（Payload)

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload)。
提交 mutation 的另一种方式是直接使用包含 type 属性的对象：当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

使用常量替代 Mutation 事件类型

把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然

mapMutations

类似于mapState和mapGetters调用方式。

Action(actions)

Action类似于mutation, 区别是;

1、Action 提交的是mutation, 而不是提交的更改状态
2、Action可以包含任何的异步操作
3、Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
4、Action 通过 store.dispatch 方法触发，支持同样的载荷方式和对象方式进行分发。
5、store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。
6、一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

用法： image.png

mapActions 类似于mapMutations

image.png

Module

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

1、对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
2、对于模块内部的 getter，根节点状态会作为第三个参数暴露出来
3、可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。
4、若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。
5、可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数

store.registerModule 方法动态注册模块

store.unregisterModule(moduleName) 来动态卸载模块。
preserveState 选项将其归档：store.registerModule('a', module, { preserveState: true })保留过去的 state

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。