一、Vuex 是什麼？

官網：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

關鍵詞：狀態管理器

二、為什麼我們要用呢？

官網：

當我們的應用遇到多個元件共享狀態時，單向資料流的簡潔性很容易被破壞：

• 多個檢視依賴於同一狀態。
• 來自不同檢視的行為需要變更同一狀態。

對於問題一，傳參的方法對於多層巢狀的元件將會非常繁瑣，並且對於兄弟元件間的狀態傳遞無能為力。

對於問題二，我們經常會採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝。

以上的這些模式非常脆弱，通常會導致無法維護的程式碼。

因此，我們為什麼不把元件的共享狀態抽取出來，以一個全域性單例模式管理呢？在這種模式下，我們的元件樹構成了一個巨大的“檢視”，不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為！

通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間的獨立性，我們的程式碼將會變得更結構化且易維護。

關鍵詞：多個元件共同用一個變數的時候，靠元件傳參太複雜，是的，一個變數，進行父傳子、子傳孫、子子孫孫無窮盡，想想都不行啊兄弟萌，不要想為啥用了

三、怎麼用？

在此瞭解五個屬性：State\Mutation\Action\Getter\Module

官網：每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全域性物件有以下兩點不同：

1. Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。

看不懂的還是聽我給你講：我們可以直接在main.js中建立一個store，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})　　

接下來為了在 Vue 元件中訪問this.$storeproperty，需要為 Vue 例項提供建立好的 store。Vuex 提供了一個從根元件向所有子元件，以store選項的方式“注入”該 store 的機制

new Vue({
  el: '#app',
  store
})

現在我們可以從元件的方法提交一個變更：

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

以上就是我們通過vuex來建立state變數、通過mutation來修改變數的過程，具體為什麼這麼做：

網上有很多解釋的文件，這裡直接複製過來

1. state：vuex的基本資料，用來儲存變數

2. geeter：從基本資料(state)派生的資料，相當於state的計算屬性

3. mutation：提交更新資料的方法，必須是同步的(如果需要非同步使用action)。每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。

　　 回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數，提交載荷作為第二個引數。

4. action：和mutation的功能大致相同，不同之處在於 ==》1.Action 提交的是 mutation，而不是直接變更狀態。 2. Action 可以包含任意非同步操作。

5. modules：模組化vuex，可以讓每一個模組擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理

簡單來說，state用來定義變數、mutation修改變數

備註：其實vuex如果你僅僅是用state的時候，你會發現，此時相當於在全域性定義了一個變數，因此我們其實是可以直接賦值進行修改的

 this.$store.state.bianliang = xinbianliang ，但是為什麼要用mutation呢，這是因為在嚴格語法下，如果直接修改state裡面的值，會給我們報錯的，因此用mutation修改

action上面的用法說了，可以操作非同步，，，getter類似於vue的compute屬性，進行檢視渲染，初學者可能一般不用，module是定義多個模組，方便大專案引入，

因此，初學者其實僅僅掌握、store\mutation的用法後，可以簡單的說自己掌握了狀態管理器

我覺得如果想徹底瞭解vuex的用法，我們不單單要光看文件，還需要不斷的用鍵盤進行敲擊，記住語法、作用等，這樣才能加深理解