Vuex有幾個比較核心的概念:
State
Getters
Mutation
Action
Module

State單一狀態樹

如果你的狀態資訊是儲存到多個Store物件中的，那麼之後的管理和維護等等都會變得特別困難。
所以Vuex也使用了單一狀態樹來管理應用層級的全部狀態。
單一狀態樹能夠讓我們最直接的方式找到某個狀態的片段，而且在之後的維護和除錯過程中，也可以非常方便的管理和維護。

Getters

我們需要從store中獲取一些state變異後的狀態，相當於計算屬性computed

例：state：{count:10}

我們元件需要獲取的count的平方該怎麼做

如果直接在元件中使用計算屬性computed 是可以的，但是如果另一個元件也需要平方的話也得自己定義一個計算屬性，這樣增加重複工作，所以就在getters中計算好，元件直接呼叫即可。

getters:{ getcount(state){ return state.count*state.count}}

元件使用：{{this.$store.getters.getcount}}

再來實現幾個複雜點的例子

在state中 新增user:[ {id:1,age:19},{id:1,age:28},{id:1,age:20},{id:1,age:10}]

元件要獲取大於18歲的該怎麼做

同樣的我們還是在getters中定義moreAge(state){return state.use.filter(s=>s.age>18)}//fifter表示過濾

元件中同樣使用即可

那我們想獲得大於18歲的個數呢？

我們可以再定義一個getters，moreAgecount(state,getters){return getters.morAge.length}

如果元件想通過自己來決定顯示大於多少歲的資訊改怎麼做呢？

mymoreAge(state){ return function (age) {return state.use.filter(s=>s.age>age) }}

為什麼不直接在mymoreAge括號中帶age不定引數呢，因為getters預設不能傳引數的，就算你在括號中帶age引數，那麼age引數也會被預設為getters，所以需要帶參只能讓getters本身返回一個函式

Mutation

mutation是store狀態更改的唯一方式

主要倆部分

1.字串的事件型別（type）
2.一個回撥函式（handler）,該回調函式的第一個引數就是state。

例如要更改state中的count，元件中button按鈕點選觸發單擊事件讓count++

mutation中寫increment(state){state.count++ }

元件中使用單擊方法為 Addcount(){this.$store.commit('increment')} //commit來呼叫mutation中的方法

再來個例子帶引數

元件自定義按鈕點選count+幾

自定義加多少那麼button的方法肯定要帶引數 Addcount(num){this.$store.commit('mutcount',num)}//帶引數方法後跟逗號後跟引數

mutation方法定義：mutcount(state,num){state.count+=num }，button中@click=“Addcount（數值）”這樣就可以實現了。

這裡要說一下mutation的另一種提交風格

第一種 this.$store.commit('mutcount',num)

第二種 this.$store.commit({ type:'mutcount', count }) //這裡 的type代表事件型別, count返回的不是一個數值，而是整個物件，針對這種現象，mutation中的方法要改變一下 mutcount(state,payload){state.count+=payload.count }//payload是負載的意思，比如要傳遞多個引數，就可以用payload

Mutation響應規則

Vuex的store中的state是響應式的, 當state中的資料發生改變時, Vue元件會自動更新.

state中的屬性都會被加入到響應式系統中，而響應式系統會監聽屬性的變化，當屬性發生變化時，會通知所有介面中用到刻屬性的地方，讓介面重新整理

這就要求我們必須遵守一些Vuex對應的規則:
提前在store中初始化好所需的屬性.
當給state中的物件新增新屬性時, 使用下面的方式:
方式一: Vu使用e.set(obj, 'newProp', 123)
方式二: 用心物件給舊物件重新賦值

Action

我們強調, 不要再Mutation中進行非同步操作.
但是某些情況, 我們確實希望在Vuex中進行一些非同步操作, 比如網路請求, 必然是非同步的. 這個時候怎麼處理呢?
Action類似於Mutation, 但是是用來代替Mutation進行非同步操作的.

格式：mutation方法 mutcount（state） ，在action中定義方法 mutcount（context）{ context.commit('mutcount')}//action中引數context是和store物件具有相同方法和屬性的物件.也就是說, 我們可以通過context去進行commit相關的操作, 也可以獲取context.state等.

在元件中 this.$store.dispatch('mutcount') //呼叫Action用dispatch

Module

Module是模組的意思, 為什麼在Vuex中我們要使用模組呢?
Vue使用單一狀態樹,那麼也意味著很多狀態都會交給Vuex來管理.
當應用變得非常複雜時,store物件就有可能變得相當臃腫.
為了解決這個問題, Vuex允許我們將store分割成模組(Module), 而每個模組擁有自己的state、mutation、action、getters等

例圖

元件中想使用a模組中的state格式如下{{$store.state.a.name}}呼叫a模組中的mutation還是直接在對應的方法中this.$store.commit('mutation')

模組a中方法想使用根Vuex中的state，可以在引數中帶rootState，通過rootState能點出來根Vuex中的stare中的內容

專案結構

為了保證index.js中不那麼亂，程式碼方便管理，官方推薦我們把部分程式碼抽離出去