一、vuex狀態(tài)共享樹

以前我們進(jìn)行數(shù)據(jù)的共享，使用的是自定義事件，自定義屬性，eventBus，全局事件總線，pubsub等，以上的方式只能在小范圍內(nèi)進(jìn)行數(shù)據(jù)共享，對于大范圍以及頻繁的數(shù)據(jù)共享來說，不太使用，尤其是在大型項(xiàng)目中的體驗(yàn)感不佳

1.什么是Vuex

Vuex是實(shí)現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的-種機(jī)制，可以方便的實(shí)現(xiàn)組件之間數(shù)據(jù)的共享。

2.vuex的優(yōu)點(diǎn)

1. 能夠在vuex中集中管理共享的數(shù)據(jù)，易于開發(fā)和后期維護(hù)

2. 能夠高效地實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開發(fā)效率

3. 存儲在vuex中的數(shù)據(jù)都是響應(yīng)式的，能夠?qū)崟r保持?jǐn)?shù)據(jù)與頁面的同步

3.什么時候使用vuex

一般情況下，只有組件之間共享的數(shù)據(jù)，才有必要存儲到vuex中;對于組件中的私有數(shù)據(jù)，依舊存儲在組件自身的data中即可。

二、Vuex的基本使用

①安裝 vuex 依賴

npmi vuex--save

②導(dǎo)入 vuex 包

importVuexfrom'vuex'
Vuex.use(Vuex)

③創(chuàng)建 store 對象

const store=new Vuex.store({
//state中存放的就是全局共享的數(shù)據(jù)
state:{count:0}
})

④將 store 對象掛載到 vue 實(shí)例中

new vue({
el:'#app',
render:h=>h(app),
router,
//將創(chuàng)建的共享數(shù)據(jù)對象，掛載到Vue實(shí)例中
//所有的組件，就可以直接從store中獲取全局的數(shù)據(jù)了
store
})

三、Vuex的核心概念

四個vuex節(jié)點(diǎn)

1.State

State提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)-放到Store的State中進(jìn)行存儲。

//創(chuàng)建store數(shù)據(jù)源，提供唯一-公共數(shù)據(jù)
conststore=newVuex.store({
state:{count:0}
})

組件中使用共享數(shù)據(jù)的第一種方式

this.$store.state.數(shù)據(jù)變量名

組件中使用共享數(shù)據(jù)的第二種方式

從vuex中按需導(dǎo)入mapState函數(shù)
import{mapState}from'vuex'導(dǎo)入mapState函數(shù)

通過剛才導(dǎo)入的mapState函數(shù)，將當(dāng)前組件需要的全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的computed計(jì)算屬性

computed:{
...mapState(['變量名'])
}

2.Mutation

Mutation 用于變更Store中的數(shù)據(jù)。vuex只能通過mutation變更Store數(shù)據(jù)，不可以直接操作Store中的數(shù)據(jù)。通過這種方式雖然操作起來稍微繁瑣- -些,但是可以集中監(jiān)控所有數(shù)據(jù)的變化。

exportdefaultnewVuex.Store({
state:{
count:0
},
mutations:{//定義mutation
add(state){
state.count++
}
}
})
//組件中使用
methods:{
add(){
//觸發(fā)mutation
this.$store.commit('add')
}
}

可以在觸發(fā)mutations時傳遞參數(shù)

export default new Vuex.Store({
state:{
count:0
},
mutations:{
addN(state,step){
//變更狀態(tài)
state.count+=step
}
}
})
//組件中使用
methods:{
add(){
//觸發(fā)mutation時攜帶參數(shù)
//commit的作用，就是調(diào)用某個mutation函數(shù)
this.$store.commit('addN',3)
}
}

mutations第二種使用方式

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

3.Action

Action用于處理異步任務(wù)。如果通過異步操作變更數(shù)據(jù)，必須通過Action,而不能使用Mutation，但是在Action中還是要通過觸發(fā)Mutation的方式間接變更數(shù)據(jù)。

export default new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
state.count++
},
actions:{
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
}
},
})
//組件中使用
methods:{
addAsync(){
這里的dispatch函數(shù)，專門用來觸發(fā)action
this.$store.dispatch('addAsync')
}
}

4.Getter

Getter用于對Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)。

1. Getter可以對Store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似Vue的計(jì)算屬性。

2. Store中數(shù)據(jù)發(fā)生變化，Getter 的數(shù)據(jù)也會跟著變化。

定義Getter

export default new Vuex.Store({
state:{
count:0
},
getters:{
showNum(state){
return'當(dāng)前最新的數(shù)量是：'+state.count
}
}

調(diào)用 Getter

使用getters的第一種方式

this.$store.getters.名稱

使用getters的第二種方式

import{mapGetters}from'vuex'
computed:{
...
mapGetters(['showNum'])
}

到此這篇關(guān)于Vue項(xiàng)目中使用vuex詳解的文章就介紹到這了,更多相關(guān)Vue vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論