Vuex
为 Vue.js 应用程序开发的状态管理模式
解决的问题
由 多个组件共享状态 引起的
1. 多个视图依赖于统一状态
2. 不同视图的行为需要变更统一状态
Store
每个应用只包含一个 Store 实例
- Vuex 的状态存储是响应式的。store 中的 state 状态更新立即触发组件更新
-
不能直接修改 state。
-
两种方式：
- 可以通过 this.$store.state. 变量 = xxx; 进行修改
-
显式地提交 (commit) mutation
- this.$store.dispatch(actionType, payload) => mapActions 使用 action 进行更改，异步
- this.$store.commit(commitType, payload) => mapMutations 使用 mutation 进行更改，同步
- 可以通过 this.$store.state. 变量 = xxx; 进行修改
- strict 模式使用第一种方法 vue 会 throw error : [vuex] Do not mutate vuex store state outside mutation handlers。
-
异同点
- 共同点：都能触发视图更新（响应式修改）
-
不同点：
- strict 模式下，使用第一种方法 vue 会 throw error : [vuex] Do not mutate vuex store state outside mutation handlers。
-
使用 commit 的优点：
- vuex 能够记录每一次 state 的变化记录，保存状态快照，实现时间漫游/回滚之类的操作。
-
核心概念
State 单一状态树
- 全局的应用层级状态 — 唯一数据源
- 通过 this.$store.state 可以访问
- mapState 辅助函数：帮助在组件中引入 state 相关属性，作为组件的计算属性
Getter state 派生状态
可以认为是 store 的计算属性：getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
getters: {
// 可以通过第二个参数 getters 来使用其他 getter
getterA: (state, getters) => {return getters.getterB.length},
getterB: (state) => {return state.todoList;},
getterC: (state) => (id) => {return state.todoList[id];
}
}-
通过属性访问：this.$store.getters.getterA
- getter 作为 Vue 的响应式系统的一部分缓存其中
-
通过方法访问：this.$store.getters.getterC(1)
- 每次都会去进行调用，而不会缓存结果
- mapGetters: 将 getters 数据映射到局部（组件）计算属性
Mutation 类似于事件 同步事务
用来更改 Vuex 的 store 中的状态
每个 mutation 包含
- 事件类型（type）
-
回调函数 (handler)：进行状态更改的地方，接收 state 作为第一个参数
- 通过 store.commit 方法 调用 mutation handler
- （state, payload）=> {}
- payload: 向 store.commit 传入的额外的参数
需遵守 Vue 的响应规则
- store 中初始化所有所需属性
- 添加新属性用 Vue.set(obj, ‘newProp’, 123); 或者 state.obj = {…state.obj, newProp: 123}
Mutation 必须是同步函数
devtools 不知道什么时候回调函数实际上被调用：在回调函数中进行的状态的改变都是不可追踪的
Action 异步事务
类似 Mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态
- 可包含任意异步操作
Action 函数接收与 store 实例具有相同方法和属性的 context 对象
actions: {
// 常见用法，用 es6 的参数解构来简化代码
actionA({state, commit, getters, dispatch}) {}}
// 使用 action
store.dispatch('actionA').then(() => {})
Module 模块
解决的问题：应用复杂时（有很多的状态和逻辑），store 对象会很臃肿
每个模块拥有自己的 state、getter、mutation、action、嵌套子模块 module
命名空间
- 默认注册在
全局命名空间，通过设置namespaced:true可以使其成为带命名空间的模块（局部化） -
带命名空间的模块内访问全局内容：
-
state & getters
getters: { // 局部化后 getterA: (state, getters, rootState, rootGetters) => {}} actions: {actionA: ({dispatch, commit, getters, rootGetters, state, rootState}) => {}} - action & mutation: 第三参数设为{root: true}
action: () => {dispatch('actionA', null, { root:true}); committ('mutationA', null, { root:true}); } -
-
在带命名空间的模块内注册全局 action
actions: { actionA: { root: true, handler(namespacedContext, payload) {...} } }
模块动态注册：store.registerModule(‘moduleName’, {})
- Vue 插件可以在 store 中附加新模块，从而使用 vuex 来管理状态。例如：vuex-router-sync模块卸载：store.unregisterModule(moduleName)
保留 state: store.registerModule(‘a’, module, { preserveState: true})
模块重用:
const MyReusableModule = {state () {
return {foo: 'bar'}
},
// mutation, action 和 getter 等等...
}插件
在插件中不允许直接修改状态——类似于组件，只能通过提交 mutation 来触发变化。
const myPlugin = store => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 {type, payload}
})
}
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
严格模式
开启严格模式，仅需在创建 store 的时候传入 strict: true
const store = new Vuex.Store({
// ...
strict: true
})在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到
不要在发布环境下启用严格模式：严格模式会深度监测状态树来检测不合规的状态变更，会有性能损失
表单处理
严格模式下，不要用 v -model 绑定 state 数据
** 这样会不使用 mutation 对 state 数据进行更改
两种方法
- v-model 绑定 value，监听 value 变化然后在事件回调中使用 mutation 去修改 state 数据
-
双向绑定的计算属性
computed: { message: {get () {return this.$store.state.obj.message}, set (value) {this.$store.commit('updateMessage', value) } } }