vuex 状态管理器

 

一。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

使用时机：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。
• 当项目是中大型时，也需要时机。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

二。属性包括：state、getter、mutations、action、

• state: 状态数用于保持状态。可通过 store.state 进行访问。
• getter: 可以认为是 store 的计算属性。一般通过该属性进行获取state的值。访问方式：store.getters.
• mutations: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。mutations内部操作必须是同步的。提交方式 store.commit('name', params)。
• action: Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。action内部操作可以是异步的，访问方式：store.dispatch('name', params).then(() => {}). 参数和回调函数可以不存在
• module: 将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

三。辅助函数：mapState, mapGetters, mapActions, mapMutations.参数可以是对象或者数组，如果为数组则使用的名字就是store里面的命名，如果为对象则可以进行重新命名。mapState，mapGetters 主要在computer 里面使用；mapActions，mapMutations 则是在methods里面使用。使用方式： ...mapState().