為什麽要單獨增加Vuex？

• 因為Vuex裏面涉及很多概念性的東西，一時之間弄不懂，當時我在項目中集成Vuex時查了很多資料，踩了不少的坑。如果剛開始接觸Vuex，你肯定會從官方文檔看起，官方給的例子，就是加一減一的例子，你會發現，Vuex好復雜啊，本來可以一步完成的事，為什麽要那麽多步，而且還搞不清楚每步和每步是什麽關系，蒙了。而且他的例子只針對簡單的業務場景，對於生產環境（多component的環境），發現根本就是適用，下面讓我來一一道來

Vuex解決了什麽問題？

• 剛開始上項目時，我也沒打算用Vuex，因為感覺那玩意沒啥用，太復雜。後來一邊做，一邊就發現一個比較難解決的問題：兄弟組件間通信的問題
  ！

如果不用Vuex，怎麽做？

• 我相信，不用Vuex也可以解決，解決方案是：Root組件做為中轉站，兄弟組件1向Root組件$broadcast，Root組件收到之後，再$dispatch，兄弟組件2從Root組件拿到數據，然後做業務處理，數據從樹根到樹頂，再到樹根。

這樣會帶來什麽問題？

• 可維護性會下降，你要想修改數據，你得維護三個地方
• 可讀性會下降，因為一個組件裏的數據，你根本就看不出來是從哪來的
• 增加耦合，大量的上傳派發，會讓耦合性大大的增加，本來Vue用Component就是為了減少耦合，現在這麽用，和組件化的初衷相背。

是所有項目都用Vuex麽？

• 凡是兄弟組件有大量通信的，建議一定要用
  ，不管大項目和小項目，因為這樣會省很多事。

從哪裏開始？

• 在這裏咱們先不談Vuex的裏面的幾個概念，想看，官方上有，剛上來就提這麽，效果也不好。咱們先從一個簡單的實例開始。

什麽例子？

• 咱們假設在A.vue裏面通過Ajax取來數據，然後做展示，這個簡單吧，咱們用Vuex來看看怎麽搞。如果不用Vuex，我們取完數據會放到Data裏面，然後拿到數據做v-for渲染，像這樣

1 ...
2 mounted() {
3     Vue.axios.get(‘http://localhost:5000/data‘).then((response) => {
4         const list = response.data.data.liveWodList
 
5         this.newList = list
6     })
7 }
8 ...

如果用Vuex呢？

• 顯然他不在你的A.vue裏面，所以你得告訴他，來數據了，快收一下，怎麽通知呢，這就涉及到Vuex的第一個操作：commit。這裏這個操作，對應Vuex的核心概念之一：Mutations（變化）！他的作用就是通知Vuex要搞事情了，比如刪除數據、增加數據等，代碼是這樣的this.$store.commit(‘setData‘, list)，這個有兩個參數，第一個參數是要搞的事情，第二個參數是具體的數據。

數據存哪了？

• 你的數據是來了，我得有地來接收數據吧，接收數據的地對應Vuex的核心概念之二State（狀態），就是所有需要變化的東西都存在我這。代碼是這樣的：

1 function setData(state, data) {
2     state.list = data
3 }

怎麽拿到數據？

• 有放肯定有取啊，數據存在State，取也是從這裏取。取數據就對應Vuex的核心概念之三Getters，代碼是這樣的的：

1 const getters = {
2     list: state => state.list
3 }

目錄結構

1 store
2 |____modules
3 | |____list.js
4 |____mutation-types.js
5 |____store_index.js

• 這是在原目錄的基礎上增加的目錄，原項目的地址。

這個目錄結構有什麽好處？

• 這是Vuex在真正項目中用到的，分模塊，每個模塊一個文件（modules），首先我們看下store/mutation-types.js。這個文件的結構比較簡單，代碼如下：

1 export const LIST = {
2     GET_DATA: ‘getData‘,
3     ADD_DATA: ‘addData‘
4 }

• 功能是：定義常量。常量的作用不用細說，防止手寫寫錯。實際開發中，應該是每一個模塊一個常量，現在只有一個LIST，未來可能會多增加NEWS/USER等，也是一個模塊，一個常量對象。
• 再看modules/list.js，代碼如下：

 1 import {
 2     LIST
 3 } from ‘../mutation-types‘
 4 
 5 const state = {
 6     list: []
 7 }
 8 
 9 const mutations = {
10     [LIST.GET_DATA](state, data) {
11         state.list = data
12     }
13 }
14 const getters = {
15     list: state => state.list
16 }

• 這裏面就有對應的三個概念state/mutations/getters，可以和我上面說的對比一下，現在看代碼，應該很清晰了。註意：裏面有很多ES6的語法，不明白的可以查一查。
• store/store-index.js為入口文件，裏面主要是引入各配置，供Vue使用。註意：這個文件的引入是在src/index.js裏面！

流程圖

好像還缺一個？

• 對，還缺一個Action，為什麽沒提這個Action，按我的理解，Action這一層應該是在多個操作中有價值，比如有一個預約按鈕，點擊之後，會更新幾個Component的狀態。現實開發中，基本上都是點擊按鈕，觸發一個事件，那增加Action就會增加整個流程的鏈路，增加復雜度。

碼上點我（Github）

Vuex詳解