Vuex全解析

參考文件 : vuex官方文件

安裝&使用

npm install vuex --save

通過Vue.use()來使用：

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

Vue.use(Vuex)
複製程式碼

Vuex是什麼?

官方概念:

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

個人理解

Vuex是一個專為vue.js應用程式開發的狀態管理模式。它集中儲存該應用的所有資料，統一保管。便於維護

這個狀態自管理應用包含以下幾個部分：

state，驅動應用的資料來源；
view，以宣告方式將 state 對映到檢視；
actions，響應在 view 上的使用者輸入導致的狀態變化。
- 但是，當我們的應用遇到多個元件共享狀態時，單向資料流的簡潔性很容易被破壞：
  - 多個檢視依賴於同一狀態。
  - 來自不同檢視的行為需要變更同一狀態。

為什麼Vuex中必須要通過commit提交mutation

再次強調，我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因為我們想要更明確地追蹤到狀態的變化。這個簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀程式碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓我們有機會去實現一些能記錄每次狀態改變，儲存狀態快照的除錯工具。有了它，我們甚至可以實現如時間穿梭般的除錯體驗。
由於 store 中的狀態是響應式的，在元件中呼叫 store 中的狀態簡單到僅需要在計算屬性中返回即可。觸發變化也僅僅是在元件的 methods 中提交 mutations。
很簡單，資料響應式是vue的核心概念，在vue上衍生出的vuex自然也遵循了這個概念，所以你直接呼叫mutation方法跟直接改變store.state是一樣，這樣vuex跟蹤不到資料的變化，無法做到響應式了。

vuex的基本思路

對於問題一，傳參的方法對於多層巢狀的元件將會非常繁瑣，並且對於兄弟元件間的狀態傳遞無能為力。
對於問題二，我們經常會採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的程式碼。
因此，我們為什麼不把元件的共享狀態抽取出來，以一個全域性單例模式管理呢？在這種模式下，我們的元件樹構成了一個巨大的“檢視”，不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為！
Vuex 借鑑了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度資料響應機制來進行高效的狀態更新。

Running 開始

每一個 Vuex 應用的核心就是 store（倉庫）。

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

Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。(資料繫結，同步更新資料)
你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。為什麼通過提交 mutation 的方式，而非直接改變?
我們想要更明確地追蹤到狀態的變化。這個簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀程式碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓我們有機會去實現一些能記錄每次狀態改變，儲存狀態快照的除錯工具。

最簡單的 Store

// 如果在模組化構建系統中，請確保在開頭呼叫了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
複製程式碼

通過 store.state 來獲取狀態物件，以及通過 store.commit 方法觸發狀態變更：

store.commit('increment')

console.log(store.state.count) // -> 1
複製程式碼

我們通過提交 mutation 的方式，而非直接改變,由於 store 中的狀態是響應式的，在元件中呼叫 store 中的狀態簡單到僅需要在計算屬性中返回即可。觸發變化也僅僅是在元件的methods 中提交 mutations。

State

Vuex 使用單一狀態樹, 用一個物件就包含了全部的應用層級狀態。至此它便作為一個“唯一資料來源 (SSOT)”而存在。這也意味著，每個應用將僅僅包含一個 store 例項。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在除錯的過程中也能輕易地取得整個當前應用狀態的快照。

在 Vue 元件中獲得 Vuex 狀態

由於 Vuex 的狀態儲存是響應式的，從 store 例項中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：

// 建立一個 Counter 元件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}
` 每當 store.state.count 變化的時候, 都會重新求取計算屬性，並且觸發更新相關聯的 DOM。`
複製程式碼

const app = new Vue({
  el: '#app',
  // 把 store 物件提供給 “store” 選項，這可以把 store 的例項注入所有的子元件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>`
})
複製程式碼

通過在根例項中註冊 store 選項，該 store 例項會注入到根元件下的所有子元件中，且子元件能通過 this.$store 訪問到。讓我們更新下 Counter 的實現：

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

mapState語法糖

當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性

// 在單獨構建的版本中輔助函式為 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函式可使程式碼更簡練
    count: state => state.count,
      
    // 傳字串引數 'count' 等同於 `state => state.count`
    countAlias: 'count',
    // 為了能夠使用 `this` 獲取區域性狀態，必須使用常規函式
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
複製程式碼

當對映的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字串陣列。

computed: mapState([
  // 對映 this.count 為 store.state.count
  'count'
])
複製程式碼

物件展開運算子

mapState 函式返回的是一個物件。我們如何將它與區域性計算屬性混合使用呢？通常，我們需要使用一個工具函式將多個物件合併為一個，以使我們可以將最終物件傳給 computed 屬性。

computed: {
  localComputed () { /* ... */ },
  // 使用物件展開運算子將此物件混入到外部物件中
  ...mapState({
    // ...
  })
}
複製程式碼

Getter

Getter字面意思是獲取,我們可以直接取出物件的值,為什麼還要衍生出Getter, 因為有的時候我們從state物件拿出的資料是不能直接使用的,我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數:

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}
複製程式碼

如果多個元件需要用到此屬性,那麼我們就要重複的寫這個方法或者將函式封裝成模組多次匯入, 那麼我們為什麼不直接使用getter呢,通過getter拿到資料可以直接用

Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。

Getter 接受 state 作為其第一個引數：

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

Getter 會暴露為 store.getters 物件：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
複製程式碼

Getter 也可以接受其他 getter 作為第二個引數：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1
複製程式碼

我們可以很容易地在任何元件中使用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}
複製程式碼

也可以通過讓 getter 返回一個函式，來實現給 getter 傳參。在你對 store 裡的陣列進行查詢時非常有用。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
複製程式碼

mapGetters語法糖

mapGetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用物件展開運算子將 getter 混入 computed 物件中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
複製程式碼

如果你想將一個 getter 屬性另取一個名字，使用物件形式：

mapGetters({
  // 對映 `this.doneCount` 為 `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
複製程式碼

Mutation

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的事件型別 (type) 和一個回撥函式 (handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數：

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

你不能直接呼叫一個 mutation handler。這個選項更像是事件註冊：“當觸發一個型別為 increment 的 mutation 時，呼叫此函式。”要喚醒一個 mutation handler，你需要以相應的 type 呼叫 store.commit 方法：

store.commit('increment')
複製程式碼

提交載荷（Payload）

你可以向 store.commit 傳入額外的引數，即 mutation 的載荷（payload）, 載荷應該是一個物件，這樣可以包含多個欄位並且記錄的 mutation 會更易讀:

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})
複製程式碼

物件風格的提交方式

提交 mutation 的另一種方式是直接使用包含 type 屬性的物件：

store.commit({
  type: 'increment',
  amount: 10
})
複製程式碼

Mutation 需遵守 Vue 的響應規則

既然 Vuex 的 store 中的狀態是響應式的，那麼當我們變更狀態時，監視狀態的 Vue 元件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項：

最好提前在你的 store 中初始化好所有所需屬性。
當需要在物件上新增新屬性時，你應該
- 使用 Vue.set(obj, 'newProp', 123), 或者
- 以新物件替換老物件。例如，利用 stage-3 的物件展開運算子我們可以這樣寫：
```
state.obj = { ...state.obj, newProp: 123 }
複製程式碼
```

使用常量替代 Mutation 事件型別

使用常量替代 mutation 事件型別在各種 Flux 實現中是很常見的模式。通常我們會分出一個mutation-types檔案來定義mutation常量：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函式名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})
複製程式碼

Mutation 必須是同步函式

一條重要的原則就是要記住 mutation 必須是同步函式。為什麼？請參考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}
複製程式碼

現在想象，我們正在 debug 一個 app 並且觀察 devtool 中的 mutation 日誌。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態和後一狀態的快照。然而，在上面的例子中 mutation 中的非同步函式中的回撥讓這不可能完成：因為當 mutation 觸發的時候，回撥函式還沒有被呼叫，devtools 不知道什麼時候回撥函式實際上被呼叫——實質上任何在回撥函式中進行的狀態的改變都是不可追蹤的。

在元件中提交 Mutation

你可以在元件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函式將元件中的 methods 對映為 store.commit 呼叫（需要在根節點注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 對映為 `this.$store.commit('increment')`

      // `mapMutations` 也支援載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 對映為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 對映為 `this.$store.commit('increment')`
    })
  }
}
複製程式碼

Action

Action 類似於 mutation，不同在於：

Action 提交的是 mutation，而不是直接變更狀態。

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

讓我們來註冊一個簡單的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
複製程式碼

Action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

使用es6簡化action

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
複製程式碼

分發 Action

Action 通過 store.dispatch 方法觸發：

store.dispatch('increment')
複製程式碼

乍一眼看上去感覺多此一舉，我們直接分發 mutation 豈不更方便？實際上並非如此，還記得 mutation 必須同步執行這個限制麼？Action 就不受約束！我們可以在 action 內部執行非同步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
複製程式碼

Actions 支援同樣的載荷方式和物件方式進行分發：

// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})

// 以物件形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
複製程式碼

來看一個更加實際的購物車示例，涉及到呼叫非同步 API 和分發多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把當前購物車的物品備份起來
    const savedCartItems = [...state.cart.added]
    // 發出結賬請求，然後樂觀地清空購物車
    commit(types.CHECKOUT_REQUEST)
    // 購物 API 接受一個成功回撥和一個失敗回撥
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}
複製程式碼

在元件中分發 Action

你在元件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函式將元件的 methods 對映為 store.dispatch 呼叫（需要先在根節點注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 對映為 `this.$store.dispatch('increment')`

      // `mapActions` 也支援載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 對映為 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 對映為 `this.$store.dispatch('increment')`
    })
  }
}
複製程式碼

多個Action分發

Action 通常是非同步的，那麼如何知道 action 什麼時候結束呢？更重要的是，我們如何才能組合多個 action，以處理更加複雜的非同步流程？

首先，你需要明白 store.dispatch 可以處理被觸發的 action 的處理函式返回的 Promise，並且 store.dispatch 仍舊返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
複製程式碼

改進:

store.dispatch('actionA').then(() => {
  // ...
})
複製程式碼

在另外一個 action 中也可以：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}
複製程式碼

利用es7的async/await繼續改進 :

// 假設 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}
複製程式碼

一個 store.dispatch 在不同模組中可以觸發多個 action 函式。在這種情況下，只有當所有觸發函式完成後，返回的 Promise 才會執行。

Module
由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

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

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
複製程式碼

專案結構

Vuex 並不限制你的程式碼結構。但是，它規定了一些需要遵守的規則：

應用層級的狀態應該集中到單個 store 物件中。
提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的。
非同步邏輯都應該封裝到 action 裡面。對於大型應用，我們會希望把 Vuex 相關程式碼分割到模組中。下面是專案結構示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我們組裝模組並匯出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模組
        └── products.js   # 產品模組

複製程式碼

Github地址: 歡迎star wq93