vuex 基本入門和使用（一）

vuex 版本爲 ^2.3.1，按照我本身的理解來整理vuex。

vuex 是什麼

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

• 什麼是狀態？

  • 狀態這裏泛指 vue 組件的一些當前的情況和性質，例如當前 a 組件是獲取到了10條數據，這是一個狀態，b 組件滾動到某個位置，這也是一個狀態。

• 狀態管理是什麼：

  • 狀態管理是對以前說的狀態進行管理，例如 a 組件這個狀態須要通知 b 組件，或者 b 組件的當前狀態須要觸發 b 的父組件的某個屬性。

  • 具體有如下三個內容：

    • state，驅動應用的數據源；
    • view，以聲明方式將 state 映射到視圖；
    • actions，響應在 view 上的用戶輸入致使的狀態變化

狀態管理的三個內容是怎麼使用的呢？就須要先知道 vue 是單向數據流的方式驅動的，而後三個內容的使用實際上是下面這個循環圖，state 會顯示到 view，用戶會根據 view 上的內容進行操做，觸發 actions 而後再去影響 state（這裏先無論三個東西是哪一個先起頭的）

正常狀況下很好理解和使用，由於都是單向的，非黑即白，可是面對複雜的業務環境之下，單向流方式會很容易遭到破壞：

• 多個視圖依賴於同一狀態。

  • 解決的話須要使用傳參方式，但對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。

• 來自不一樣視圖的行爲須要變動同一狀態。

  • 解決的話採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。

以上的這些模式很是脆弱，主要是由於多個組件之間的關係會變得很複雜，一般會致使沒法維護的代碼。

有見及此，vuex 借鑑了 Flux、Redux、和 The Elm Architecture的設計思想，將狀態管理單獨抽離出來，造成了如今的 vuex。官方也畫出了一個圖來講明 vuex 在哪裏起做用的，參看下圖：

這個圖是須要解釋一下的：

• vuex 的區域是綠色虛線框的位置

• 流程：

  • 每次 vue 組件須要 給 vuex 分派 一個 actions，actions 提交一個 mutation，由 mutation 來修改 state，而後再返回給 vue 組件渲染。
  • state 狀態只能由 mutation 來修改。
  • actions 會能夠封裝各類 mutation 來進行修改 state。
• 關於 state：state 就是狀態
• 關於 mutation：mutation 是 vuex 對 state 或者 store 提交修改的惟一方式，不用管太多特別的含義。

• 關於 getter：

  • 這裏沒有出現 getter， 由於 getter 在這個流程裏面不須要出現，他只是一個屬性，方便從 vuex 的內存裏面獲取一些信息。

• 關於 actions：

  • Action 提交的是 mutation，而不是直接變動狀態。
  • Action 能夠包含任意異步操做。

筆者本身的理解就是Action 至關於一把手槍，mutation 至關於裏面的子彈，靶心就是 state， 得分指示牌就是 getter 。

什麼狀況下我應該使用 Vuex？

雖然 Vuex 能夠幫助咱們管理共享狀態，但也附帶了更多的概念和框架。這須要對短時間和長期效益進行權衡。

• 若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。
• 若是是簡單應用一個簡單的 global event bus （即作一個全局的變量或者全局對象）就足夠您所需了。
• 可是，若是您須要構建是一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

基礎樣例

• 每個 Vuex 應用的核心就是 store（倉庫）。
• 基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。
• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
• 你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。

總的來講就是 vuex 的狀態是存儲在 store 裏面的，要修改狀態就只能進行 mutation 的提交 commit，一旦進行提交成功，狀態被改變後，相關使用該狀態的組件也會更新狀態信息。

// 若是在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: { 
    count: 0
  },
  mutations: { 
      // 只能經過 mutation 來進行狀態變動
    increment (state) {
      state.count++
    }
  }
})

須要使用 es2015語法編寫 javascript

// 經過vuex 的 mutation 進行 commit
store.commit('increment')

// 經過store.state來獲取狀態對象
console.log(store.state.count) // -> 1

在jsrun上的樣例地址：http://jsrun.net/i2qKp

參考：

• Introduction · Vuex