vue2.x中的vuex版本是4.x以下,vue3.x中使用的vuex版本必须保证在4.x以上
1.state
(1)this.$store.state.全局数据名称
(2)mapState(computed)
import {mapState} from 'vuex'
computed:{
...mapState(['全局数据1']) //['全局数据2','全局数据2']
}
然后就可以不用$store.state.全局数据引用,直接插值{{全局数据}}
2.getters
例:
getters:{
数据名称(state){
return state.state中定义的数据+1
}
}
(1)this.$store.getters.数据名称
(2)mapGetters(computed)
import {mapGetters} from 'vuex'
computed:{
...mapGetters([数据名称])
}
然后就可以直接插值{{数据名称}}
3.mutations
(1)this.$store.commit()
mutations:{
addN(state,step){
state.count+=step
}
}
this.$store.commit('addN',3)
(2)mapMutations(methods)
import {mapMutations} from 'vue'
methods:{
...mapMutations(['addN'])
}
在需要的的地方直接使用this.add(3)
4.actions
(1)this.$store.dispatch()
actions:{
addNAsync(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
}
}
this.$store.dispatch('addNAsync',+5)
(2)mapActions(methods)
import {mapActions} from 'vuex'
methods:{
...mapActions(['addNAsync'])
}