关于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
})