你使用过 Vuex 吗?
Vuex 是一个专为 Vue.js 应用程序开发的状态(全局数据)管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。
- (1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- (2)改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块:
- State => State提供唯一的公共数据源,所共享的数据都要统一放到Store的State中进行存储。
- Getter => Getter 可以对 Store 中已有的数据加工处理之后形成的数据,类似Vue的计算属性。
- Mutation => 是唯一更改 store 中状态的方法,且必须是同步函数。Mutation用于变更Store中的数据
- Action => Action 用于处理异步任务。如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发 Mutation的方式间接变更数据。
- Module => 模块化Vuex,允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。(看下方解释)
-
然后打开
store.js
文件,导入这两个 moduleimport moduleA from './module/moduleA'; import moduleB from './module/moduleB'; export default new Vuex.Store({ modules: { moduleA, moduleB, }, // ... }