Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
概念
- 状态(State):Vuex 使用单一状态树,即用一个对象就包含了全部的应用层级状态。它作为“唯一数据源”而存在。
- Getter :允许组件从 Store 中获取状态,相当于 Store 的计算属性。
- Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Mutation 需遵守 Vue 的响应规则,最好提前在 store 中初始化所有所需属性。
- Action:Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。
- Module:由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。
作用
- 维护多组件共享的状态。
- 统一管理和维护应用的状态,便于开发和后期维护。
- 提供一种机制,方便地实现如“撤销/重做”等复杂功能。
应用场景
- 中大型单页应用:多个视图组件需要共享状态。
- 需要跨组件共享数据的复杂应用。
- 需要维护复杂的状态关系和状态变化的业务逻辑。
使用方式
- 安装 Vuex:
npm install vuex@next --save
- 创建 Vuex Store:
import { createStore } from 'vuex'; const store = createStore({ state() { return { count: 0 }; }, mutations: