Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时,状态的可维护性和可预测性问题。
Vuex 的核心概念
State(状态):
Vuex 使用单一状态树(Single Source of Truth),即用一个对象就包含了全部的应用层级状态。这意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照。
Getters(获取器):
store 的计算属性,允许我们从 store 的 state 中派生出一些状态。
Mutations(变更):
Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更新的地方,并且它会接受 state 作为第一个参数。
Actions(动作):
Action 提交 mutation,而不是直接变更状态。Action 可以包含任意异步操作。
Modules(模块):
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决这个问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter,甚至是嵌套子模块——从上至下进行同样方式的分割。
使用 Vuex 的步骤
安装 Vuex:
如果你使用 npm,可以通过以下命令安装 Vuex:
npm install vuex --save
1
创建 Store:
创建一个新的 .js 文件(例如 store.js),并在其中引入 Vue 和 Vuex,然后定义和导出 Vuex store。
在 Vue 应用中使用 Store:
在 Vue 应用中,通过 Vue 的实例选项 store 使用这个 store。
在组件中使用 State、Getters、Mutations 和 Actions:
使用 this.$store.state.xxx 来访问 state。
使用 mapState、mapGetters、mapMutations、mapActions 辅助函数在组件中更简洁地访问这些 Vuex 特性。
示例