关于Vuex中的属性-用法总结

关于Vuex中的属性-用法总结

store 的四个属性：state， getters, mutations, actions

1、state

vuex中的state 相当于vue中的 data
使用方法：
例如：state定义count：0
在vue组件的computed中
count（）{
return this.$store.state.count
}
也可以使用辅助函数mapState：
…mapState（[‘count’]）//同名变量可以这么写
或
…mapState（{
counter：‘count’ //‘count’:state里的变量名 不用同名变量
}）
或
…mapState（{
counter:(state)=>state.count; //最优方法 可以用来做计算 上边两种字符串方法用于计算复杂
}）

2、mutation

vuex中的mutation 相当于 vue中的 methods;
只能同步操作,不能有异步的代码.异步写在action里
vue规定需要触发mutation里的方法才可以改变state中的初值.
不推荐:this.$ store.state.count = 3 这样的写法改变state里的值，防止逻辑混乱；

使用方法：
例如在mutation里名义一个方法
updateCount(state,{num,num2}){//如果想获取多个值,只能用第二个值接受对象,不能写三个值
state.num = count;
}
通过在vue文件mounted中使用:
this.$ commit(‘updateCount’,{
num: i++,
num2: 2
})
第二种好方法:
vue文件中computed中设置
…mapMutation（[‘updataCount’]）
通过在vue文件mounted中使用:
this.updataCount({
num: i++,
num2: 2
})

3、getters

vuex中的getters 相当于vue中的 computed
使用方法：
在state里定义初值：
firstName：‘小红’，
lastName：‘小明’
在getters里写入计算方法：
fullName（state）{
return ‘$ {state.firstName} {state.lastName})’
}
在vue组件的computed中
fullName(){
return this.$store.getters.fullName
}
或
…mapGetters（[‘fullName’]）//‘fullName’ 是在getters里定义的方法名

4、action

vuex中的action 也相当于vue中的methods;
区别是
同步方法写在mutations,异步写在action里
第一种使用方法:
例如在actions里定义一个方法:
updateCountSync(store,data){//data:第二个参数只能接收一个对象,不可以写第三个值.和mutations有点小区别
setTimeout(()=>{
store.commit(‘updateCountAsync’,{
num:data.num
})
},data.time )
}
调用方法:
在vue组件的mounted中使用
this.$store.dispatch(‘updateCountAsync’,{
num:5,
time:2000
})
第二种方法:
vue文件中methods中设置
…mapAction（[‘updateCountAsync’]）
通过在vue文件mounted中使用:
this.updateCountAsync({
num:5,
time:2000
})