Vuex的核心概念
State
state
提供唯一的公共數(shù)據(jù)源暖眼,所有共享的數(shù)據(jù)都要統(tǒng)一放到Store
的State
中進(jìn)行存儲鼎天。
store.js
//創(chuàng)建store數(shù)據(jù)源笤喳,提供唯一公共數(shù)據(jù)
const store = new Vuex.Store({
state:{count:0}
})
組件訪問State中數(shù)據(jù)
第一種方式:
this.$store.state.count
//count是全局?jǐn)?shù)據(jù)名稱
第二種方式:
//從vuex中按需導(dǎo)入mapState函數(shù)
import { mapState } from 'vuex'
通過剛才導(dǎo)入的mapState
函數(shù)疼蛾,將當(dāng)前組件需要的全局?jǐn)?shù)據(jù)戚宦,映射為當(dāng)前組件的computed
計算屬性:
computed:{
...mapState(['count'])
}
Mutation
Mutation
用于變更Store
中的數(shù)據(jù)
1.只能通過mutation
變更Store
數(shù)據(jù),不可以直接操作Store
中的數(shù)據(jù)炭晒。
2.通過這種方式雖然操作起來稍微繁瑣一些待逞,但是可以集中監(jiān)控所有數(shù)據(jù)的變化。
//定義Mutation
const store = new Vuex.Store({
state: {
count:0
},
mutations:{
add(state){
//變更狀態(tài)
state.count++
}
}
})
//觸發(fā)mutation
methods:{
hande(){
//觸發(fā)mutation的第一種方式
this.$store.commit('add')
}
}
可以在觸發(fā)mutations
時傳遞參數(shù)
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
addN(state,step){
// 變更狀態(tài)
state.count +=step
}
}
})
//觸發(fā)mutation
methods:{
handle2(){
//在調(diào)用commit函數(shù)
//觸發(fā)mutations時攜帶參數(shù)
this.$store.commit('addN',3)
}
}
this.$store.commit()
觸發(fā)mutations
的第一種方式网严,觸發(fā)mutations
的第二種方式:
//1.從vuex中按需導(dǎo)入mapMutations函數(shù)
import { mapMutations } from 'vuex'
通過剛才導(dǎo)入的mapMutations
函數(shù)识樱,將需要的mutations
函數(shù),映射為當(dāng)前組件的methods
方法:
//2.將指定的mutations函數(shù)震束,映射為當(dāng)前組件的methods函數(shù)
methods:{
...mapMutations(['add','addN'])
}
Action
Action
用于處理異步任務(wù)
如果通過異步操作變更數(shù)據(jù)怜庸,必須通過Action
,而不能使用Mutation
垢村,但是Action
中還是要通過觸發(fā)Mutation
的方式間接變更數(shù)據(jù)割疾。
//定義Action
const store = new Vuex.Store({
// ...省略其他代碼
mutations:{
add(state){
state.count++
}
},
actions:{
addAsync(context){
setTimeout(() =>{
context.commit('add')
},1000)
}
}
})
//觸發(fā)Action
methods:{
handle(){
//觸發(fā)actions第一種方式
this.$store.dispatch('addAsync')
}
}
觸發(fā)actions
異步任務(wù)攜帶參數(shù):
//定義Action
const store = new Vuex.Store({
// ...省略其他代碼
mutations:{
addN(state,step){
state.count += step
}
},
action:{
addNAsync(context,step){
setTimeout (() => {
context.commit('addN',step)
},1000)
}
}
})
//觸發(fā)Action
methods:{
handle(){
//在調(diào)用dispatch函數(shù)
//觸發(fā)actions時攜帶參數(shù)
this.store.dispatch('addNasync',5)
}
}
this.$store.dispatch()
是觸發(fā)actions
的第一種方式,觸發(fā)actions
的第二種方式:
//1.從vuex中按需導(dǎo)入mapActions函數(shù)
import { mapActions } from 'vuex'
通過剛才導(dǎo)入的mapActions
函數(shù)嘉栓,將需要的actions
函數(shù)宏榕,映射為當(dāng)前組件的methods
方法:
//2.將制定的actions函數(shù),映射為當(dāng)前組件的methods函數(shù)
methods:{
...mapActions(['addASync','addNASync'])
}
Getter
Getter
用于對Store
中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)侵佃。
1.Getter
可以對Store
中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)担扑,類似Vue
的計算屬性。
2.Store
中數(shù)據(jù)發(fā)生變化趣钱,Getter
的數(shù)據(jù)也會跟著變化涌献。
//
const store = new Vuex.Store({
state:{
count:0
},
getters:{
showNum:state =>{
return '當(dāng)前最新的數(shù)量是[‘+ state.count +’]'
}
}
})
使用getters
的第一種方式:
this.$store.getters.名稱
使用getters
的第二種方式:
import { mapGetters } from 'vuex'
computed:{
...mapGetters(['showNum'])
}