Vue.js是國內當下十分流行的一個前端Web框架，具有豐富的組建和庫支援，其中Vuex可以說是最為重要的一個了，但是，在一些專案中，我們甚至都不會用到Vuex，所有Vue開發者有時候就會忽略掉這樣一個重要的組建，今天我就結合自己的學習過程，對Vuex做一個總結。

一、什麼是Vuex

       用官網的話解釋：

       Vuex是一個專門為Vue.js應用程式開發的狀態管理模式。

       由這句話可得，Vuex是專門的為Vue開發的組建，不可以應用到別的應用程式當中。那麼什麼是狀態管理呢？在使用Vue進行開發的時候，我們會在data定義一個個變數，那麼這每一個變數都可以是一個狀態，Vuex則就是用來管理這些狀態的。所以，當Vue這個應用程式比較龐大的時候，他的元件比較多，為了方便地管理某一些狀態，我們需要把一些狀態（變數）抽取出來，通過Vuex進行集中管理。

二、為什麼要使用Vuex？

        這個最主要的是取決於我們的專案，當我們構建一箇中大型的單頁應用的時候，Vuex可以更好地幫助我們在元件的外部統一管理狀態。比如說，我們在做一個商場介面的時候，很多頁面都會有一個購物車的圖示，這個圖示會一直記錄你的商品數目，如下圖所示，如果採用不斷傳參的方法進行商品數目獲取，那麼將會非常麻煩，而且不方便修改管理，如果使用Vuex就會很輕鬆。

        所以你其實可以把Vuex理解成是一個windows全域性變數，方便我們去使用。

三、Vuex的核心概念（API）

1.State

       上面我們說過，在每個Vue檔案中的data內的變數，都可以說是一個狀態（state），statue也是Vue的核心概念，它告訴開發者，Vue就是這樣一個漸進式框架，使用狀態管理DOM。

       State是唯一的資料來源，所有的資料都會抽取到State中進行管理。

       State是單一的狀態樹。

const Counter = {
    template: `<div>{{ count }}</div>`,
    computed:{
        count(){
            return this.$store.state.count
        }
    }
}

      當$store.state.count發生變化時，computed中的count()函式就會實時計算，最後渲染到試圖中。

      this是當前Vue的例項。

      this.$store就是我們的Vuex物件（只要import Vuex，並且use，就可以通過這個api進行呼叫） 

      count就是我們Vuex物件下掛載的屬性。

      通過這種方式我們就可以使用Vuex下的狀態。

2.Getters

       通過Getters可以派生出一些新的狀態。

const store = new Vuex.Store({
    state:{
        todos:[
            {id:1,text:'...',done:true},
            {id:2,text:'...',done:false}
        ]
    },
    getters{
        doneTodos:state => {
            return this.state.todos.filter(todo => todo.done)
        }
    }
})

       通過new Vuex.Store就可以建立一個Vuex物件。

       把狀態抽取除開放到了state當中。

       假如state中todes[]這個陣列在每個頁面中都會使用。

       但恰巧有一個頁面並不想完全使用這個陣列，只想用done屬性為true的，這個時候就可以通過getters進行過濾，或者一些替換操作。 

3.Mutations

       更改Vuex的store中的狀態的唯一的方法是提交mutations

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations: {
        increment(state){
            //變更狀態
            state.count++;
        }
    }
})

        這個時候如果我們希望把state中count改成2，我們只能通過mutations這個方法來執行，重要的事情說三遍，只能只能只能通過mutations，不能像Vue檔案中通過this.count修改。

       那麼我們怎麼去呼叫它呢？

store.commit('increment')

       通過這樣的命令，我們就可以觸發這個修改，從而實現我們的目標。

4.Actions

       Actions提交的是mutations，而不是直接變更狀態。

       Actions可以包含任意的非同步操作。

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations: {
    increment(state){
      //變更狀態
      state.count++;
    }
  },
  actions:{
    increment(context){
      context.commit('increment')
    }
  }
})

       通過全域性定義的context物件，來提交我們的increment方法 。

       我們可以在Vue元件的method當中提交修改，也可以在Vuex下的actions中提交修改。

       大家可能會覺得actions有些多餘，但是，在一些場景下他還是有用的，如果mutations當中的必須是同步的方法，而actions可以包含任意非同步操作。

5.Modules

       面對複雜的應用程式，當管理的狀態比較多的時候，我們需要將Vuex的store物件分割成模組（modules）

const moduleA = {
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
}
const moduleB = {
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
}
const store = new Vuex.Store({
    modules: {
        a:moduleA,
        b:moduleB
    }
})

四、圖解Vuex 

       上面這張圖是來自官網的說明圖，簡單做一個講解，上面的Backend API是我們後端的介面，左邊，當我們的Vue元件發生變化時，通過Dispatch方法去提交actions，而action需要提交commit改變我們的mutations，而mutations是改變狀態的唯一途徑，進而改變Vuex中的狀態，最後實時渲染元件中的狀態。其實就是把元件中的狀態提取出來，可以供全域性進行使用，和修改。

       那麼當專案相對複雜的時候我們就需要對Vue專案目錄做一個簡單的修改，當然如果Vue專案並沒有那麼龐大，可以直接在main.js中進行Vuex的構建。

src目錄
|--index.html
|--main.js
|--api
    --...#抽取出API請求
|--components
    --App.vue
    --...
|--store
    --index.js #我們組裝模組並且匯出store的地方
    --actions.js #根級別的action
    --mutations.js #根級別的mutations
    --modules
       --cart.js #購物車模組
       --products.js #產品模組