[TOC] ## 前言 我們需要解決多個組件間的數據通信和狀態管理就顯得難以維護的問題，在vue中用的是vuex，在react中用的是redux.通過本篇教程將基本熟悉它的所有常用用法以及注意事項。 ## 用于解決什么問題？ 用于解決組件之間數據共享，數據的集中處理。 ## 什么是vuex ？單項數據流  ## 基本使用 ~~~bash #安裝 npm install --save vuex #引入 一般我們會在src根目錄下創建一個store的文件夾， #下面寫index.js來實現相關的存儲方法（組件共用數據） import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) ~~~ ## vuex的組成部分（應用結構）  ## State State負責存儲整個應用的狀態數據，一般需要在使用的時候在跟節點注入store對象，后期就可以使用this.$store.state直接獲取狀態。一般是在main.js文件中引入store的文件，從而使用。（vue spa應用中） ~~~ //store為實例化生成的 import store from './store' new Vue({ el: '#app', store, render: h => h(App) }) ~~~ 這個store可以理解為一個容器，包含著應用中的state等。實例化生成store的過程是： ~~~ const mutations = {...}; const actions = {...}; const state = {...}; Vuex.Store({ state, actions, mutation }); ~~~ 后續在組件中使用的過程中，如果想要獲取對應的狀態你就可以直接使用this.$store.state獲取，當然，也可以利用vuex提供的mapState輔助函數將state映射到計算屬性中去，如 ~~~ // 我是組件 let name=this.$store.state.name import {mapState} from 'vuex' export default { computed: mapState({ count: state => state.count }) } ~~~ ## Mutations Mutations的中文意思是“變化”，利用它可以更改狀態，本質就是用來處理數據的函數，其接收唯一參數值state。store.commit(mutationName)是用來觸發一個mutation的方法。需要記住的是，定義的mutation必須是同步函數，否則devtool中的數據將可能出現問題，使狀態改變變得難以跟蹤。 ~~~ const mutations = { mutationName(state) { //在這里改變state中的數據 } } 在組件中觸發： //我是一個組件 export default { methods: { handleClick() { this.$store.commit('mutationName') } } } ~~~ 或者使用輔助函數mapMutations直接將觸發函數映射到methods上，這樣就能在元素事件綁定上直接使用了。如： ~~~ import {mapMutations} from 'vuex' //我是一個組件 export default { methods: mapMutations([ 'mutationName' ]) } ~~~ ## Actions Actions也可以用于改變狀態，不過是通過觸發mutation實現的，重要的是可以包含異步操作。其輔助函數是mapActions與mapMutations類似，也是綁定在組件的methods上的。如果選擇直接觸發的話，使用this.$store.dispatch(actionName)方法。action內部支持異步方法，這是很重要的一點區別。 ~~~ //定義Actions，以下方法用了es5的解構 const actions = { actionName({ commit }) { //dosomething commit('mutationName') } } //等同于下面的代碼 const actions = { actionName({context ) { //dosomething context.commit('mutationName') } } ~~~ 在組件中使用 ~~~ import {mapActions} from 'vuex' //我是一個組件 export default { methods: mapActions([ 'actionName', ]) } //分發action store.dispatch('actionname') ~~~ ## Getters 有些狀態需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態進行訪問。或者直接使用輔助函數mapGetters將其映射到本地計算屬性中去。這個屬性相當于vuex的計算屬性。 ~~~ const getters = { strLength: state => state.aString.length } //上面的代碼根據aString狀態派生出了一個strLength狀態 在組件中使用 import {mapGetters} from 'vuex' //我是一個組件 ,可以利用mapGetters export default { computed: mapGetters([ 'strLength' ]) } //直接使用getters computed:{namelen(){ return this.$store.getters.namelen } } ~~~ ## Plugins 插件就是一個鉤子函數，在初始化store的時候引入即可。比較常用的是內置的logger插件，用于作為調試使用。 ~~~ import createLogger from 'vuex/dist/logger' const store = Vuex.Store({ ... plugins: [createLogger()] }) ~~~ ## 模塊化 隨著項目的復雜性增加，我們共享的狀態越來越多，這時候我們就需要把我們狀態的各種操作進行一個分組，分組后再進行按組編寫。 ~~~ // 一般我們用常量申明模塊組： const moduleA={ state,mutations,getters,actions } export default new Vuex.Store({ modules:{a:moduleA} }) // 基本使用 ，加上state.a的命名空間即可 computed:{ count(){ return this.$store.state.a.count; } }, ~~~ ## 注意事項 ### vuex與持久存儲localStorage的關系 **場景** ：發現部分開發在引入持久存儲之后，mutation的時候沒有改變state，而是直接修改的localStorage，這樣會導致沒有頁面刷新時，拿到的state都是不對的。因為state不會實時監聽localStorage的更改。 **解決方案** ： 1 更改state的時候，除了更改localStorage，也要更改state，而且更改state才是必須要做的，而更改localStorage只是為了解決刷新頁面后數據丟失的問題。(推薦方式，畢竟使用vuex的全套才是正宗) 2 如果你覺得上面的方案每次都寫很麻煩，也可以嘗試增加locastorage的監聽機制，當發生變化的時候，尋找更改對應的state. ### 拓展符寫法 在mapState,mapActions,mapMutations使用的時候，為了不影響正常方法的使用，我們可以使用對象以及數組的拓展方法進行拓展。 ~~~ methods:{ ...mapMutations([ 'add','reduce' ]), ...mapActions(['addAction','reduceAction']) }, // 獲取state屬性，你也可以采用這種寫法 import {mapState} from 'vuex'; computed:mapState({ count:state=>state.count }) ~~~ ### 單頁中直接定義使用（特別說明） ~~~ // 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) //使用的時候 如果想改變數值，必須用事件觸發，不是直接改變。 store.commit('increment') console.log(store.state.count) // -> 1 ~~~ ## 個人理解 自我實踐下來，如果要用好vuex，需要掌握以下的幾點。 1 組件數據共享，跨頁面數據共享，可以統一管理數據的存儲，操作，分發。比如用戶數據，比如固定的某些數據是固定某些api獲取的且不止用于一個組件或者一個場景。 2 不要形式主義，每個頁面都用vuex；每個模塊都寫getters，actions，常量方法，當你的工程量、數據量達到使用某技術場景的時候，采用某方案會覺得恰如其分 3 處理基于數據的業務邏輯，一般是跨頁面跨組件的，比如購買流程對用戶余額，購物車，訂單的聯動影響 4 vuex核心的index做一些模塊公用的存儲工具，可以配置一些需要的插件或者工具類 5 拓展：數據通訊不止vuex，簡單的也可以用event bus，甚至頁面內的已經能符合你的需求了 ## 其他 最后，還有一些高級用法，如嚴格模式，測試等可能使用頻率不會特別高。有需要的時候查官方文檔就可以了。總的來說，Vuex還是相對比較簡單的，特別是如果之前有學過Flux,Redux之類的話，上手起來更加容易。 ## 參考文檔 * [vuex中文官網](https://vuex.vuejs.org/zh-cn/) * [csdn博客](http://blog.csdn.net/sinat_17775997/article/details/54943797) * [技術胖的vuex視頻教程](http://jspang.com/post/vuex.html)