vuex图解
Vuex 理解
简单解释下：
Vuex 使用 单一状态树,通俗理解就是一个应用的数据集合，可以想象为一个“前端数据库”，让其在各个页面上实现数据的共享，并且可操作
Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。
从左到右，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。
注意事项
-
数据流都是单向的
-
组件能够调用 action
-
action 用来派发 Mutation
-
只有 mutation 可以改变状态
-
store 是响应式的，无论 state 什么时候更新，组件都将同步更新
State
在 store 中的 state 对象，可以理解为 Vue 实例中的 data 对象，它用来保存最基本的数据。
声明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
state: {
stateA: 'a',
stateB: 'b',
stateC: 'c'
}
});
console.log(store.state.stateA); // a
|
在 Vue 中获取 store 中的状态
|
1
2
3
4
5
6
7
8
9
|
let app = new Vue({
el: '#demo',
template: '<h1>{}</h1>',
computed: {
myState() {
return store.state.stateA;
}
}
});
|
最简单的方式就是通过 Vue 中的计算属性(computed) 来将 store 中的状态映射为 Vue 的数据。但是当数据多时这种方法明显效率过低，所以 Vuex 中提供了 mapState 方法用于批量映射 store 中的状态。
mapState映射
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import { mapState } from 'Vuex';
let app = new Vue({
el: '#demo',
store,
data: {
local: 'L'
},
computed: mapState({
stateA: state => state.stateA,
stateB: 'stateB',
stateC(state) {
return state.stateC + this.local;
}
})
});
|
上例中，a. 可以通过 ES6 中的箭头函数进行数据的映射，b. 当计算属性的名称与 state 的属性名一致时可能直接通过字符串赋值，c. 当需要引用上下文中的 data 属性实，只能通过常规函数来使 this 生效。
如果所有计算属性的名称都与 state 一致，可以在 mapState 中以数组的方式进行映射。如果 Vue 中已经存在计算属性，可以通过 ES6 的展开操作符 (…) 进行组合。
|
1
2
3
4
5
6
7
8
9
10
|
let app = new Vue({
el: '#demo',
store,
computed: {
local() {
return 'Local';
},
...mapState(['stateA', 'stateB', 'stateC'])
}
});
|
在 Vuex 模块化中，state 是唯一会根据组合时模块的别名来添加层级的，后面的 getters、mutations 以及 actions 都是直接合并在 store 下。
例如，访问模块 a 中的 state，要通过 store.state.a，访问根 store 上申明的 state，依然是通过 store.state.xxx 直接访问。
Mutations
在vuex中，更改state 的方式只有提交mutation.大家可以把他就想象成vue中methods 中的一个方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let store = new Vuex.Store({
state: {
count: 0
},
mutations: {
addCount(state) {
state.count ++;
}
}
});
store.commit('addCount');
console.log(store.state.count); // 1
|
想要改变状态的时候都是用store.commit的方式
传参方式
每一个 mutation 都有一个字符串的事件类型和一个回调函数,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
第一种方式：提交载荷（Payload）
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
|
1
2
3
4
5
6
7
8
|
...
mutations: {
addCount(state, n) {
state.count += n;
}
}
store.commit('addCount', 10);
|
官方推荐，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
|
1
2
3
4
5
6
7
8
9
|
// ...
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
|
第二种方式：对象风格的传参方式
提交 mutation 的另一种方式是直接使用包含 type 属性的对象：
|
1
2
3
4
|
store.commit({
type: 'increment', // 事件名
amount: 10
})
|
Mutations 需遵守 Vue 的响应规则
在 mutation 中更改 state 应该以新对象替换老对象，不要在直接原对象上直接修改。
- 最好提前在你的 store 中初始化好所有所需属性。
- 当需要在对象上添加新属性时，你应该
- 使用 Vue.set(obj, ‘newProp’, 123),或者
- 以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：
1state.obj = { ...state.obj, newProp: 123 }
mutation 必须是同步函数
|
1
2
3
4
5
6
7
|
mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
|
在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用 —— 实质上任何在回调函数中进行的的状态的改变都是不可追踪的。
在组件中提交 Mutations
你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
})
}
}
|
在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你能调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务：
|
1
2
|
store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。
|
Actions
与 mutations 类似，不同模块的 actions 均可以通过 store.dispatch 直接触发。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
const moduleA = {
state: {
count: 1
},
mutations: {
sayCountA(state) {
console.log('Module A count: ', state.count);
}
},
actions: {
maAction(context) {
context.dispatch('mbAction');
}
}
};
const moduleB = {
state: {
count: 2
},
mutations: {
sayCountB(state, num) {
console.log('Module B count: ', state.count+num);
}
},
action: {
mbAction({ commit, rootState }) {
commit('sayCountA');
commit('sayCountB', rootState.a.count);
}
}
};
const store = {
modules: {
a: moduleA,
b: moduleB
}
};
store.dispatch('maAction'); // Module A count: 1、Module B count: 3
|
action 的回调函数接收一个 context 上下文参数，context 包含：1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性，
有一点要注意的是，将 store 中的 state 绑定到 Vue 组件中的 computed 计算属性后，对 state 进行更改需要通过 mutation 或者 action，在 Vue 组件中直接进行赋值 (this.myState = ‘ABC’) 是不会生效的。