（轉）Vuex簡單入門

今天試了一下Vuex,感受跟Redux的實現思想相似。再此，簡單地總結一下。

什麼是Vuex

在Vue中，多組件的開發給咱們帶來了不少的方便，但同時當項目規模變大的時候，多個組件間的數據通訊和狀態管理就顯得難以維護。而Vuex就此應運而生。將狀態管理單獨拎出來，應用統一的方式進行處理，在後期維護的過程當中數據的修改和維護就變得簡單而清晰了。Vuex採用和Redux相似的單向數據流的方式來管理數據。用戶界面負責觸發動做（Action)進而改變對應狀態（State），從而反映到視圖（View）上。以下圖所示：

vuex-flow.png

使用Vuex

安裝:

npm install --save vuex

引入：

1.  
   import Vuex from 'vuex'
2.  
   import Vue from 'vue'
3.  
    
4.  
   Vue.use(Vuex)

Vuex的組成部分

完整的應用Vuex開發的應用結構應該是這樣的：

vuex-complete.png

下面針對比較核心的部分進行說明。

State

State負責存儲整個應用的狀態數據，通常須要在使用的時候在跟節點注入store對象，後期就可使用this.$store.state直接獲取狀態

1.  
   //store爲實例化生成的
2.  
   import store from './store'
3.  
    
4.  
   new Vue({
5.  
   el: '#app',
6.  
   store,
7.  
   render: h => h(App)
8.  
   })

這個store能夠理解爲一個容器，包含着應用中的state等。實例化生成store的過程是：

1.  
   const mutations = {...};
2.  
   const actions = {...};
3.  
   const state = {...};
4.  
    
5.  
   Vuex.Store({
6.  
   state,
7.  
   actions,
8.  
   mutation
9.  
   });

後續在組件中使用的過程當中，若是想要獲取對應的狀態你就能夠直接使用this.$store.state獲取，固然，也能夠利用vuex提供的mapState輔助函數將state映射到計算屬性中去，如

1.  
   //我是組件
2.  
   import {mapState} from 'vuex'
3.  
    
4.  
   export default {
5.  
   computed: mapState({
6.  
   count: state => state.count
7.  
   })
8.  
   }

這樣直接就能夠在組件中直接使用了。

Mutations

Mutations的中文意思是「變化」，利用它能夠更改狀態，本質就是用來處理數據的函數，其接收惟一參數值state。store.commit(mutationName)是用來觸發一個mutation的方法。須要記住的是，定義的mutation必須是同步函數，不然devtool中的數據將可能出現問題，使狀態改變變得難以跟蹤。

1.  
   const mutations = {
2.  
   mutationName( state) {
3.  
   //在這裏改變state中的數據
4.  
   }
5.  
   }

在組件中觸發：

1.  
   //我是一個組件
2.  
   export default {
3.  
   methods: {
4.  
   handleClick() {
5.  
   this.$store.commit('mutationName')
6.  
   }
7.  
   }
8.  
   }

或者使用輔助函數mapMutations直接將觸發函數映射到methods上，這樣就能在元素事件綁定上直接使用了。如：

1.  
   import {mapMutations} from 'vuex'
2.  
    
3.  
   //我是一個組件
4.  
   export default {
5.  
   methods: mapMutations([
6.  
   'mutationName'
7.  
   ])
8.  
   }

Actions

Actions也能夠用於改變狀態，不過是經過觸發mutation實現的，重要的是能夠包含異步操做。其輔助函數是mapActions與mapMutations相似，也是綁定在組件的methods上的。若是選擇直接觸發的話，使用this.$store.dispatch(actionName)方法。

1.  
   //定義Actions
2.  
   const actions = {
3.  
   actionName({ commit }) {
4.  
   //dosomething
5.  
   commit( 'mutationName')
6.  
   }
7.  
   }

在組件中使用

1.  
   import {mapActions} from 'vuex'
2.  
    
3.  
   //我是一個組件
4.  
   export default {
5.  
   methods: mapActions([
6.  
   'actionName',
7.  
   ])
8.  
   }

Getters

有些狀態須要作二次處理，就可使用getters。經過this.$store.getters.valueName對派生出來的狀態進行訪問。或者直接使用輔助函數mapGetters將其映射到本地計算屬性中去。

1.  
   const getters = {
2.  
   strLength: state => state.aString.length
3.  
   }
4.  
   //上面的代碼根據aString狀態派生出了一個strLength狀態

在組件中使用

1.  
   import {mapGetters} from 'vuex'
2.  
    
3.  
   //我是一個組件
4.  
   export default {
5.  
   computed: mapGetters([
6.  
   'strLength'
7.  
   ])
8.  
   }

Plugins

插件就是一個鉤子函數，在初始化store的時候引入便可。比較經常使用的是內置的logger插件，用於做爲調試使用。

1.  
   import createLogger from 'vuex/dist/logger'
2.  
   const store = Vuex.Store({
3.  
   ...
4.  
   plugins: [createLogger()]
5.  
   })

最後，還有一些高級用法，如嚴格模式，測試等可能使用頻率不會特別高。有須要的時候查官方文檔就能夠了。總的來講，Vuex仍是相對比較簡單的，特別是若是以前有學過Flux,Redux之類的話，上手起來更加容易。

參考文檔

http://vuex.vuejs.org/zh-cn/index.html