vuex的理解與使用
阿新 • • 發佈:2018-05-18
vuex
研究了一段時間的vuex,只是簡單地會用,對於裏面的一些知識點還是不太會表達,就目前,先梳理一下自己對vuex中幾個主要概念的理解
vuex一個專為 Vue.js應用程序開發的狀態管理模式,主要是為了解決組件間的通信,方便數據的共用,如果不使用vuex,數據之間或許可以用父子組件的傳值來解決,但是比較麻煩。
概念的理解
state: 狀態管理 ,儲存初始化數據
getters:相當於store的計算屬性,對State 裏面的數據二次處理
mutations:改變state狀態的函數,對數據進行計算的方法全部寫在裏面,每個mutation都有一個事件類型和一個回調函數,回調函數必須是同步的,通過this.$store.commit(‘decrement‘)來觸發
actions:主要是commit mutations,而不是用於直接更變狀態,是異步操作,通過this.$store.dispatch(‘decrement‘)來觸發
mapState 輔助函數,把全局的 state映射到當前組件的 computed 計算屬性中,返回的是一個對象
之所以使用mapstate:當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性會有些重復和冗余。
mapGetters:把全局的getters映射到當前組件的 computed 計算屬性中,返回的是一個數組
computed:mapGetters([
‘count‘
//映射 this.count 為 store.getters.count
]),
mapMutations:將組件中的 methods 映射為 store.commit 調用
methods:{
...mapMutations([
‘add‘
//映射 this.add() 為 this.$store.commit(‘add‘)
])
},
mapActions::將組件中的 methods 映射為 store.dispatch 調用
methods:{
...mapActions([
‘increment‘
// //映射 this.increment() 為 this.$store.dispatch(‘increment‘)
])
},
vuex的理解與使用