本文github地址
首先我问看下完整的Vuex选项对象
new Vuex.Store({
state, //访问状态对象
mutations, //访问触发状态
getters,
actions
});
//还有一个模块的
export default new Vuex.Store({
modules:{
a:moduleA
}
});
一、 state --- 访问状态对象
说明：也就是使用vuex中的数据
**1. **直接在组件中使用{{ $store.state.num }}
**2. **需要使用数据的组组件（此处是App.vue）中的计算属性
a. 方式一
computed: {
count(){
return this.$store.state.num + '：方式一获取的state数据';//this指的是main.js中的vue实例对象
}
}
b. 方式二，利用mapState
import {mapState} from 'vuex'
computed:mapState({
// es箭头函数写法，好处箭头函数中的this有穿透效果，直接是上上级
// count: state => state.num + '：方式二获取的state数据'
// es5写法
count:function (state) {
return state.num + '：方式二获取的state数据'
}
})
c. 方式三,不对数据进行计算（加工处理），当数据较多的时候,数组形式
computed:mapState([
'counut'//这里必须state中的数据和此模板中的数据一个名字，也就类似组件定义的简写
])
d. 方式四,不对数据进行计算 ，当数据较多的时候,json形式
推荐
computed:mapState({
count:'num'
})
效果如下图：
二、 Mutations--- 触发状态
说明：必须用commit触发mutations中的方法
需求：在组件中传入一个值给store.js
<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中的触发状态
<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指的是上一层不是本层。
//组件中
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生成的依赖包中不能解析此语法，所以需要进行如下配置。
- npm install babel-preset-stage-2 --save-dev
- 在.babelrc文件中加一个配置
["stage-2"]
四、 actions --- 异步状态
和Mutations的区别是Mutations是同步状态，Actions是异步状态，可以调用Mutations中的状态，异步的批处理的一个集合。
//组件中
<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太多的时候，我们就需要分成不同组别的模块组。
//组件中
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如下图：
