Vuex 是一个专为 Vue.js 应用程序开发的
状态管理模式。
负责管理整个Vue系统中的数据及变更，所谓的状态其实就是数据。
一、Vuex主要属性：
- state －－－定义：所有状态
- Getter －－－定义：便捷的状态获取方法
- Mutation －－－定义：状态更新方法,只能是同步方法
- Action －－－类似于 mutation
- 不同在于：Action 是通过提交mutation改变状态，而不是直接变更状态。
- Action 可以包含任意异步操作。
- Module －－－将 store 分割成模块,防止store树过大.
- 各个子Module的
state中属性名可以相同，因为每个子module在state中是独立的对象，如图：1。 - 各个子Module中的
Getter方法名不能重复，他们被统一放在store实例中，如图：2。 - 各个子Module中的
Mutation方法名最好不要重复，否则一次触发会触发所有子Module中同名的Mutation，从而改变相应子Module中的state。如图3，由于a、b两个Module中的Mutation方法名相同(changeName),结果我用store.commit('changeName','张三')时，把a、b中的name都改了。 - 各个子Module中的
Action方法名跟Mutation一样。
- 各个子Module的
图1：子Module中的属性名可以相同
图2：子Module中的Getter不能重名
图3：子Module中的Mutation最好不要同名
二、Vuex结构
//定义子模块，分别包装子store
const moduleA = {
state: { name : 'moduleA' },
getters : {
getMAName : state => {
return state.name;
}
},
mutations : {
changeMAName(state,newName){
console.log(state);
state.name = newName;
}
},
actions : {
changeMANameAction(context,newName){
context.commit('changeMAName',newName);
}
}
}
const moduleB = {
state: { name : 'moduleB' },
getters : {
getMBName : state => {
return state.name;
}
},
mutations : {
changeMBName(state,newName){
state.name = newName;
}
},
actions : {
changeMBNameAction(context,newName){
context.commit('changeMBName',newName);
}
}
}
const store = new Vuex.store({
/** ########## 1、State
* 定义状态(相当于各个属性字段)
*/
state : {
name : 'Diana',
age : 16,
sex : girl,
books : ['语文','数学','英语']
},
/** ########## 2、Getter
* 接受 state 和 getters
* state会被自动传递，不用管，getters也会被自动传递，我们可以拿到getters中的其他的getter方法。
*/
getters : {
getName : (state,getters) => {
return state.name.toUpperCase() + getters.getAge;
},
getAge : state => {
return state.age;
}
},
/** ########## 3、Mutation
* 接受 state 和 payload(手动传入的值)
* 其中 state 会自动传入，不用管，payload需要我们按需传递。
*/
mutations: {
//原生mutation
growUp (state,olderNum) {
state.age + olderNum;
}
//借助ES6的结构 和 Vuex.mapState
...Vuex.mapState({
changeName(state,newName){
state.name = newName.firstName;
}
})
},
/** ########## 4、Action
* acton接受一个context，他拥有与store实例相同的属性和方法，但是他不是store！！！
* action通过触发mutation来达到改变状态的目的。
*/
actions: {
growUpAction (context) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('growUp');
resolve('长大了哦');
}, 1000)
})
}
},
/** ########## 5、Module
* 拆分store为多个子store
*/
modules: {
a: moduleA,
b: moduleB
}
});
三、Mutation触发方式
## 1、store实例触发
// string + payload方式。
store.commit('growUp',1);
//对象方式，type：为要出发的mutation名称，
store.commit({
type : 'changeName',
firstName : 'Elizabeth'
})
## 2、组件中触发
this.$store.commit('xxx')；
四、Action触发方式
## 1、store实例触发：
store.dispatch('growUpAction').then((data) => {
console.log(data);//长大了哦
})
## 2、组件中触发：
this.$store.dispatch('xxx')
五、Getter调用方式
## 1、store实例调用
store.getters.getName
六、辅助函数，混入 computed中
computed:{
/** #####这个没搞明白有啥用######3
* mapState 辅助函数，
*/
Vuex.mapState({
changeName(state,newName){
state.name = newName.firstName;
}
})
/**
* mapGetters 辅助函数
*/
//如果computed的函数名与getters中的一样，则传一个数组即可
Vuex.mapGetters([
'getAge',
'getName',
// ...
])
//如果想改变getter的名字，可以传一个对象
Vuex.mapGetters({
// 映射 `this.age` 为 `store.getters.getAge`
age: 'getAge'
})
}
Vuex.mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
