一、Vuex概述
1.1 組件之間共享數(shù)據(jù)的方式
父向子傳值：v-bind 屬性綁定
子向父?jìng)髦担簐-on 事件綁定
兄弟組件之間共享數(shù)據(jù)：EventBus
- $on 接收數(shù)據(jù)的那個(gè)組件
- $emit 發(fā)送數(shù)據(jù)的那個(gè)組件
1.2 Vuex是什么
Vuex是實(shí)現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制，可以方便的實(shí)現(xiàn)組件之間數(shù)據(jù)的共享
1.3
使用Vuex統(tǒng)一管理狀態(tài)的好處
- 能夠在vuex中集中管理共享的數(shù)據(jù)，易于開(kāi)發(fā)和后期維護(hù)
- 能夠高效地實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開(kāi)發(fā)效率
- 存儲(chǔ)在vuex中的數(shù)據(jù)都是響應(yīng)式的，能夠?qū)崟r(shí)保持?jǐn)?shù)據(jù)與頁(yè)面的同步
什么樣的數(shù)據(jù)適合存儲(chǔ)到vuex中
一般情況下，只有組件之間的共享的數(shù)據(jù)，才有必要存儲(chǔ)到vuex中，對(duì)于組件中的私有數(shù)據(jù)，依舊存儲(chǔ)在組件自身的data中即可
二、Vuex的基本使用
1.安裝vuex依賴包
npm install vuex --save
2.導(dǎo)入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
3.創(chuàng)建store對(duì)象
const store = new Vuex.Store({
//state中存放的就是全局共享的數(shù)據(jù)
state:{
count:0
}
})
將store對(duì)象掛載到vue實(shí)例中
new Vue({
el:"app",
render:h=> h(app),
router,
//將創(chuàng)建的共享數(shù)據(jù)對(duì)象掛載到vue實(shí)例中
//所有的組件，就可以直接從store中獲取全局的數(shù)據(jù)了
store
})
三、Vuex的核心概念
3.1 核心概念概述
Vuex中的主要核心概念如下
- state
- Mutation
- Action
- Getter
3.2 State
State提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到Store的State中進(jìn)行存儲(chǔ)
//創(chuàng)建store數(shù)據(jù)源，提供唯一公共數(shù)據(jù)
const store = new Vuex.Store({
state:{count:0}
})
組件訪問(wèn)State中數(shù)據(jù)的第一種方式：
this.$store.state.全局?jǐn)?shù)據(jù)名稱
組件訪問(wèn)state中數(shù)據(jù)的第二種方式：
//1.從vuex中按需導(dǎo)入mapState函數(shù)
import {mapState} from 'vuex'
通過(guò)剛才導(dǎo)入的mapState函數(shù)，將當(dāng)前組件需要的全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的computed計(jì)算屬性：
//2.將全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的計(jì)算屬性
computed:{
...mapState(['count'])
}
3.3 Mutation
Mutation用于變更Store中的數(shù)據(jù)
- 只能通過(guò)mutation變更Store數(shù)據(jù)，不可以直接操作Store中的數(shù)據(jù)。
- 通過(guò)這種方式雖然操作起來(lái)稍微繁瑣一些，但是可以集中監(jiān)控所有數(shù)據(jù)的變化。
//定義Mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
//變更狀態(tài)
state.count++
}
}
})
//觸發(fā)mutation
methods:{
handle(){
//觸發(fā)mutations的第一種方式
this.$store.commit('add')
}
}
可以在觸發(fā)mutaions時(shí)傳遞參數(shù)
//定義Mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
//變更狀態(tài)
state.count += step
}
})
/觸發(fā)mutation
methods:{
handle2(){
//在調(diào)用commit函數(shù)
//觸發(fā)mutations時(shí)攜帶參數(shù)
this.$store.commit('addN',3)
}
}
this.$store.commit()是觸發(fā)mutations的第一種方式，觸發(fā)mutations的第二種方式：
//1.從vuex中按需導(dǎo)入mapMutations函數(shù)
import {mapMutations} from 'vuex'
通過(guò)剛才導(dǎo)入的mapMutations函數(shù)，將需要的mutations函數(shù)，映射為當(dāng)前組件的methods方法：
//2.將指定的mutations函數(shù)，映射為當(dāng)前組件methods函數(shù)
methods:{
...mapMutations(["add","addN"])
}
3.4 Action
Action 用于處理異步任務(wù)。
如果通過(guò)異步操作變更數(shù)據(jù)，必須通過(guò)Action，而不能使用Mutation，但是在Action中還是要通過(guò)觸發(fā)Mutation的方式間接變更數(shù)據(jù)
//定義Action
const store = new Vuex.Store({
//...省略其他代碼
mutations:{
add(state){
state.count++
},
},
actions:{
addAsync(context){
context.commit('add')
}
}
})
//觸發(fā)Action
methods:{
handle(){
//觸發(fā)actions的第一種方式
this.$store.dispatch('addAsync')
}
}
觸發(fā)actions異步任務(wù)時(shí)攜帶參數(shù)
//定義Action
const store = new Vuex.Store({
//...省略其他代碼
mutations:{
add(state,step){
state.count+=step
},
},
actions:{
addAsync(context,step){
context.commit('add',step)
}
}
})
//觸發(fā)Action
methods:{
handle(){
//在調(diào)用dispatch函數(shù)
//觸發(fā)actions時(shí)攜帶參數(shù)
this.$store.dispatch('addAsync',5)
}
}
this.$store.dispatch()是觸發(fā)actions的第一種方式，觸發(fā)actions的第二種方式：
//1.從vuex中按需導(dǎo)入mapActions函數(shù)
import {mapActions} from 'vuex'
通過(guò)剛才導(dǎo)入的mapActions函數(shù)，將需要的actions函數(shù)，映射為當(dāng)前組件的methods方法：
//2.將指定的actions函數(shù)，映射為當(dāng)前組件的methods函數(shù)
methods:{
...mapActions(["addAsync","addNAsync"])
}
3.5 Getter
Getter用于對(duì)Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)
- Getter可以對(duì)Store已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似Vue的計(jì)算屬性
- Store中數(shù)據(jù)發(fā)生變化，Getter的數(shù)據(jù)也會(huì)跟著變化
//定義Getter
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"])
}
