?vue2.x中的vuex版本是4.x以下，vue3.x中使用的vuex版本必須保證在4.x以上
1.state
(1)this.$store.state.全局?jǐn)?shù)據(jù)名稱
(2)mapState(computed)
import {mapState} from 'vuex'
computed:{
...mapState(['全局?jǐn)?shù)據(jù)1'])? //['全局?jǐn)?shù)據(jù)2','全局?jǐn)?shù)據(jù)2']
}
然后就可以不用$store.state.全局?jǐn)?shù)據(jù)引用，直接插值{{全局?jǐn)?shù)據(jù)}}
2.getters
例：
getters:{
數(shù)據(jù)名稱(state){
return? state.state中定義的數(shù)據(jù)+1
}
}
(1)this.$store.getters.數(shù)據(jù)名稱
(2)mapGetters(computed)
import {mapGetters} from 'vuex'
computed:{
...mapGetters([數(shù)據(jù)名稱])
}
然后就可以直接插值{{數(shù)據(jù)名稱}}
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'])
}
