Vuex 狀態管理
目錄
安裝
NPM
npm install vuex --save
在一個模組化的打包系統中，您必須顯式地通過Vue.use()來安裝 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vuex簡介
VueX 是一個專門為 Vue.js 應用設計的狀態管理構架，統一管理和維護各個vue元件的可變化狀態(你可以理解成 vue 元件裡的某些 data )。
這個狀態自管理應用包含以下幾個部分：
- state，驅動應用的資料來源；
- view，以宣告方式將state對映到檢視；
- actions，響應在view上的使用者輸入導致的狀態變化。
示意圖
以下是一個表示“單向資料流”理念的簡單示意：
當我們的應用遇到多個元件共享狀態時，單向資料流的簡潔性很容易被破壞：
- 多個檢視依賴於同一狀態。
- 來自不同檢視的行為需要變更同一狀態。
傳參的方法對於多層巢狀的元件將會非常繁瑣，並且對於兄弟元件間的狀態傳遞無能為力。
我們經常會採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的程式碼。
因此，把元件的共享狀態抽取出來，以一個全域性單例模式進行管理，供全域性元件呼叫獲取共同管理這個狀態，通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間的獨立性，我們的程式碼將會變得更結構化且易維護。
Vuex的五個屬性
-
state
state：vuex的基本資料，用來儲存變數
-
getters
geeter：從基本資料(state)派生的資料，相當於state的計算屬性
-
mutations
mutation：提交更新資料的方法，必須是同步的(如果需要非同步使用action)。每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。
回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數，提交載荷作為第二個引數。
-
actions
action：和mutation的功能大致相同，不同之處在於 ==》1.Action 提交的是 mutation，而不是直接變更狀態。 2. Action 可以包含任意非同步操作。
-
modules
modules：模組化vuex，可以讓每一個模組擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。