首先我问看下完整的Vuex选项对象

1
2
3
4
5
6
7
8
9
10
11
12
new Vuex.Store({
state, //访问状态对象
mutations, //访问触发状态
getters,
actions
});
//还有一个模块的
export default new Vuex.Store({
modules:{
a:moduleA
}
});

一、 state — 访问状态对象

说明:也就是使用vuex中的数据

  1. 直接在组件中使用
  2. 需要使用数据的组组件(此处是App.vue)中的计算属性

a. 方式一

1
2
3
4
5
computed: {
count(){
return this.$store.state.num + ':方式一获取的state数据';//this指的是main.js中的vue实例对象
}
}

b. 方式二,利用mapState

1
2
3
4
5
6
7
8
9
10
import {mapState} from 'vuex'
computed:mapState({
// es箭头函数写法,好处箭头函数中的this有穿透效果,直接是上上级
// count: state => state.num + ':方式二获取的state数据'
// es5写法
count:function (state) {
return state.num + ':方式二获取的state数据'
}
})

c. 方式三,不对数据进行计算(加工处理),当数据较多的时候,数组形式

1
2
3
computed:mapState([
'counut'//这里必须state中的数据和此模板中的数据一个名字,也就类似组件定义的简写
])

d. 方式四,不对数据进行计算 ,当数据较多的时候,json形式

1
2
3
computed:mapState({
count:'num'
})

效果如下图:
3868852-0bdd86bfc757d583.png

二、 Mutations— 触发状态

说明:必须用commit触发mutations中的方法
需求:在组件中传入一个值给store.js

1
2
3
4
5
6
7
8
9
<button type="button" name="buttonAdd" @click="$store.commit('add',{a:10})">加一个</button>
const mutations = {
//定义方法 --- 类似methods
add(state,n){//state 是把上面的数据引入进来的
console.log(n);//传入的第二参数的那个对象
state.num+= n.a;
}
}
  1. 利用mapMutations引入sotre中的触发状态
1
2
3
4
5
6
7
8
9
10
<button type="button" name="buttonAdd" @click="add({a:10})">map=>加一个</button><!-- 传值的话只需要在括号里传,但要注意格式 -->
<button type="button" name="buttonAdd" @click="minus">map=>减一个</button>
import {mapMutations} from 'vuex'
//因为方法所以写在组件中的methods中
methods:mapMutations([
'add',
'minus'
])

三、 getters — 获取者

注意:在vue2.x中的computed中不要使用箭头函数,因为箭头函数中的this指的是上一层不是本层。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//组件中
import {mapGetters} from 'vuex'
computed:{
/*count(){
return this.$store.getters.num
}*/
//map对象方式获取getters
...mapGetters({
count:'num'//引进是静态的
})
},
//store.js文件中
const getters = {
num:function (state) {
return state.num;
}
}
export default new Vuex.Store({
state,
mutations,
getters
});

注意:..mapGetters({})使用了三个点“…”,由于vue-cli生成的依赖包中不能解析此语法,所以需要进行如下配置。

1
2
3
4
npm install babel-preset-stage-2 --save-dev
在.babelrc文件中加一个配置
["stage-2"]

四、 actions — 异步状态

和Mutations的区别是Mutations是同步状态,Actions是异步状态,可以调用Mutations中的状态,异步的批处理的一个集合。

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
//组件中
<button type="button" name="buttonAdd" @click="addPlus">addPlus =>加二个</button>
<button type="button" name="buttonAdd" @click="minusPlus">minusPlus</button>
import {mapActions} from 'vuex'
methods:{
...mapMutations([
'add',
'minus'
]),
...mapActions([
'addPlus',
]),
...mapActions({
minusPlus:'minusPlus'
})
}
//store.js中
const actions = {
addPlus(context){//context代表了整个的store
context.commit('add',{a:2}); //每次加2
setTimeout(()=>{
context.commit('minus');
},3000)
console.log('Actions中的加');
},
minusPlus({commit}){//commit
commit('minus')
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
});

五、 module — 模块化

当 state, mutations, getters,actions太多的时候,我们就需要分成不同组别的模块组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//组件中
A模块组中的num => {{ $store.state.a.numA }}
B模块组中的num => {{ $store.state.b.numB }}
//store.js中
const moduleA ={
state: {
numA: 888
}
}
const moduleB ={
state: {
numB: 666
}
}
export default new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
});

最终demo如下图:
3868852-9cb4829bab473694.png