在使用Vue開發過程中,經常會遇到需要多個組件共享一些狀態數據的情況,這時引用vuex來進行狀態管理是一個非常好的選擇。
首先,在Vue項目中引入vuex:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
然后,在src目錄下新建一個store.js文件用于vuex的配置:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {...} // 狀態數據 const getters = {...} // 獲取狀態數據的方法 const mutations = {...} // 修改狀態數據的方法 const actions = {...} // 異步操作方法 export default new Vuex.Store({ state, getters, mutations, actions })
state是用來存儲狀態數據的對象,getters是用來獲取狀態數據的方法,mutations是用來修改狀態數據的方法,actions是用來處理異步操作的方法。在這個文件里定義好需要用到的狀態和方法后,就可以在組件中引用了。
在組件中引用vuex:
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export default { computed: { ...mapState({ count: state =>state.count }), ...mapGetters([ 'doneTodos' ]) }, methods: { ...mapMutations([ 'increment' ]), ...mapActions([ 'asyncIncrement' ]) } }
mapState、mapGetters、mapMutations和mapActions都是用于快速引用vuex的方法的工具函數。
mapState接收一個對象,對象中的屬性名對應了組件中需要使用的狀態屬性名,屬性值對應的是vuex中的狀態屬性名。
mapGetters接收一個數組,對應需要使用的getter方法。
mapMutations接收一個數組,對應需要使用的mutation方法,調用該方法時會自動提交mutation。
mapActions接收一個數組,對應需要使用的action方法,調用該方法時會自動提交action。
使用這些工具函數,就能夠非常方便地在組件中引用vuex的狀態數據和方法了。
總結一下,使用vuex進行狀態管理在Vue開發中非常廣泛,可以讓多個組件共享狀態數據、調用同一份方法代碼等非常方便,通過引用vuex提供的map系列方法可以在組件中快速調用狀態數據和方法。