Vue項目中如何使用vuex

這篇文章主要介紹“Vue項目中如何使用vuex”，在日常操作中，相信很多人在Vue項目中如何使用vuex問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue項目中如何使用vuex”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、vuex狀態共享樹

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

1.什么是Vuex

Vuex是實現組件全局狀態(數據)管理的-種機制，可以方便的實現組件之間數據的共享。

2.vuex的優點

1. 能夠在vuex中集中管理共享的數據，易于開發和后期維護

2. 能夠高效地實現組件之間的數據共享，提高開發效率

3. 存儲在vuex中的數據都是響應式的，能夠實時保持數據與頁面的同步

3.什么時候使用vuex

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

二、Vuex的基本使用

①安裝 vuex 依賴

npmi vuex--save

②導入 vuex 包

importVuexfrom'vuex'
Vuex.use(Vuex)

③創建 store 對象

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

④將 store 對象掛載到 vue 實例中

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

三、Vuex的核心概念

四個vuex節點

1.State

State提供唯一的公共數據源，所有共享的數據都要統-放到Store的State中進行存儲。

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

組件中使用共享數據的第一種方式

this.$store.state.數據變量名

組件中使用共享數據的第二種方式

從vuex中按需導入mapState函數
import{mapState}from'vuex'導入mapState函數

通過剛才導入的mapState函數，將當前組件需要的全局數據，映射為當前組件的computed計算屬性

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

2.Mutation

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

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

可以在觸發mutations時傳遞參數

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

mutations第二種使用方式

this. $store.commit() 是觸發mutations的第一種方式，觸發mutations的第二種方式

//1.從vuex中按需導入mapMutations函數
import{mapMutations}from'vuex'

通過剛才導入的mapMutations函數，將需要的mutations函數,映射為當前組件的methods方法

//2.將指定的mutations函數，映射為當前組件的methods函數
methods:{
...
mapMutations(['sub'])
}

3.Action

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

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

4.Getter

Getter用于對Store中的數據進行加工處理形成新的數據。

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

2. Store中數據發生變化，Getter 的數據也會跟著變化。

定義Getter

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

調用 Getter

使用getters的第一種方式

this.$store.getters.名稱

使用getters的第二種方式

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

到此，關于“Vue項目中如何使用vuex”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！