vuex

2018-04-20 本文已影响0人 xiaowenSpring

参考链接 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