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'])
}
