什么是Vuex
在Vue中饭豹，多組件的開發(fā)給我們帶來了很多的方便踪央，但同時當(dāng)項目規(guī)模變大的時候伞矩，多個組件間的數(shù)據(jù)通信和狀態(tài)管理就顯得難以維護(hù)。而Vuex就此應(yīng)運而生尽纽。將狀態(tài)管理單獨拎出來咐蚯，應(yīng)用統(tǒng)一的方式進(jìn)行處理，在后期維護(hù)的過程中數(shù)據(jù)的修改和維護(hù)就變得簡單而清晰了弄贿。Vuex采用和Redux類似的單向數(shù)據(jù)流的方式來管理數(shù)據(jù)春锋。用戶界面負(fù)責(zé)觸發(fā)動作（Action)進(jìn)而改變對應(yīng)狀態(tài)（State），從而反映到視圖（View）上差凹。如下圖所示：
安裝:
npm install --save vuex
引入：
import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)
Vuex的組成部分
完整的應(yīng)用Vuex開發(fā)的應(yīng)用結(jié)構(gòu)應(yīng)該是這樣的：
State
State負(fù)責(zé)存儲整個應(yīng)用的狀態(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可以理解為一個容器危尿，包含著應(yīng)用中的state等呐萌。實例化生成store的過程是：
const mutations = {...};const actions = {...};const state = {...};Vuex.Store({ state, actions, mutation});
后續(xù)在組件中使用的過程中，如果想要獲取對應(yīng)的狀態(tài)你就可以直接使用this.$store.state
獲取谊娇，當(dāng)然肺孤，也可以利用vuex
提供的mapState
輔助函數(shù)將state
映射到計算屬性中去，如
//我是組件import {mapState} from 'vuex'export default { computed: mapState({ count: state => state.count })}
這樣直接就可以在組件中直接使用了济欢。
Mutations
Mutations的中文意思是“變化”渠旁，利用它可以更改狀態(tài)，本質(zhì)就是用來處理數(shù)據(jù)的函數(shù)船逮，其接收唯一參數(shù)值state。
store.commit(mutationName)
是用來觸發(fā)一個mutation
的方法粤铭。需要記住的是挖胃，定義的mutation
必須是同步函數(shù)，否則devtool中的數(shù)據(jù)將可能出現(xiàn)問題梆惯，使?fàn)顟B(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
Actions
也可以用于改變狀態(tài)凹髓，不過是通過觸發(fā)mutation
實現(xiàn)的，重要的是可以包含異步操作怯屉。其輔助函數(shù)是mapActions
與mapMutations
類似蔚舀，也是綁定在組件的methods
上的。如果選擇直接觸發(fā)的話锨络，使用this.$store.dispatch(actionName)
方法赌躺。
//定義Actionsconst actions = { actionName({ commit }) { //dosomething commit('mutationName') }}
在組件中使用
import {mapActions} from 'vuex'//我是一個組件export default { methods: mapActions([ 'actionName', ])}
Getters
有些狀態(tài)需要做二次處理，就可以使用getters
羡儿。通過this.$store.getters.valueName
對派生出來的狀態(tài)進(jìn)行訪問礼患。或者直接使用輔助函數(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' ])}
Plugins
插件就是一個鉤子函數(shù)缅叠，在初始化store
的時候引入即可悄泥。比較常用的是內(nèi)置的logger插件，用于作為調(diào)試使用肤粱。
import createLogger from 'vuex/dist/logger'const store = Vuex.Store({ ... plugins: [createLogger()]})
最后弹囚，還有一些高級用法，如嚴(yán)格模式狼犯，測試等可能使用頻率不會特別高余寥。有需要的時候查官方文檔就可以了∶跎總的來說宋舷，Vuex還是相對比較簡單的，特別是如果之前有學(xué)過Flux,Redux之類的話瓢姻，上手起來更加容易祝蝠。
