什么是Vuex
在Vue中，多組件的開發(fā)給我們帶來了很多的方便，但同時當項目規(guī)模變大的時候，多個組件間的數(shù)據(jù)通信和狀態(tài)管理就顯得難以維護。而Vuex就此應運而生。將狀態(tài)管理單獨拎出來，應用統(tǒng)一的方式進行處理，在后期維護的過程中數(shù)據(jù)的修改和維護就變得簡單而清晰了。Vuex采用和Redux類似的單向數(shù)據(jù)流的方式來管理數(shù)據(jù)。用戶界面負責觸發(fā)動作（Action)進而改變對應狀態(tài)（State），從而反映到視圖（View）上。如下圖所示：
安裝:
npm install --save vuex
引入：
importVuexfrom'vuex'
importVuefrom'vue'
Vue.use(Vuex)
完整的應用Vuex開發(fā)的應用結構應該是這樣的：
下面針對比較核心的部分進行說明。
State負責存儲整個應用的狀態(tài)數(shù)據(jù)，一般需要在使用的時候在跟節(jié)點注入store對象，后期就可以使用this.$store.state直接獲取狀態(tài)
//store為實例化生成的
import? store? from'./store'
new? Vue({
el:'#app',
store,
render:h=>h(App)
})
這個store可以理解為一個容器，包含著應用中的state等。實例化生成store的過程是：
constmutations = {...};
constactions = {...};
conststate = {...};
Vuex.Store({
state,?
actions,?
mutation
});
后續(xù)在組件中使用的過程中，如果想要獲取對應的狀態(tài)你就可以直接使用this.$store.state獲取，當然，也可以利用vuex提供的mapState輔助函數(shù)將state映射到計算屬性中去，如
//我是組件
import {mapState}? from? 'vuex'
export? default {
computed: mapState({
? count:state=>state.count
})
}
這樣直接就可以在組件中直接使用了。
Mutations的中文意思是“變化”，利用它可以更改狀態(tài)，本質就是用來處理數(shù)據(jù)的函數(shù)，其接收唯一參數(shù)值state。store.commit(mutationName)是用來觸發(fā)一個mutation的方法。需要記住的是，定義的mutation必須是同步函數(shù)，否則devtool中的數(shù)據(jù)將可能出現(xiàn)問題，使狀態(tài)改變變得難以跟蹤。
const mutations = {? mutationName(state) {? ? //在這里改變state中的數(shù)據(jù)? }}
在組件中觸發(fā)：
//我是一個組件
export? default{?
methods: {
? handleClick() {? ?
? this.$store.commit('mutationName')?
}
}
}
或者使用輔助函數(shù)mapMutations直接將觸發(fā)函數(shù)映射到methods上，這樣就能在元素事件綁定上直接使用了。如：
import? {mapMutations}? from? 'vuex'
//我是一個組件
export
default{
methods: mapMutations([
'mutationName']
)}
Actions也可以用于改變狀態(tài)，不過是通過觸發(fā)mutation實現(xiàn)的，重要的是可以包含異步操作。其輔助函數(shù)是mapActions與mapMutations類似，也是綁定在組件的methods上的。如果選擇直接觸發(fā)的話，使用this.$store.dispatch(actionName)方法。
//定義Actions
const actions = {?
actionName({ commit }) {
//dosomething
commit('mutationName')?
}
}
在組件中使用
import? {mapActions}? from? 'vuex'
//我是一個組件
export
default{methods: mapActions([
'actionName',
])
}
有些狀態(tài)需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態(tài)進行訪問。或者直接使用輔助函數(shù)mapGetters將其映射到本地計算屬性中去。
const getters = {
strLength:state=>state.aString.length
}
//上面的代碼根據(jù)aString狀態(tài)派生出了一個strLength狀態(tài)
在組件中使用
import? {mapGetters}? from? 'vuex'
//我是一個組件
export? default{
computed: mapGetters([
'strLength'
])
}
插件就是一個鉤子函數(shù)，在初始化store的時候引入即可。比較常用的是內置的logger插件，用于作為調試使用。
impot? createLogger? from? 'vuex/dist/logger'
const store = Vuex.Store({
? ...? plugins: [createLogger()]
})
最后，還有一些高級用法，如嚴格模式，測試等可能使用頻率不會特別高。有需要的時候查官方文檔就可以了?？偟膩碚f，Vuex還是相對比較簡單的，特別是如果之前有學過Flux,Redux之類的話，上手起來更加容易。
