vue-learning：40 - Vuex - 第一篇：概念和基本使用

vuex 第一篇

目錄

• vuex概念
• state / mapState
• getter / mapGetter
• mutation / mapMutation
• action / mapAction
• module / 命名空間 / 動態註冊和卸載模塊
• vuex的插件plugin開發
• vuex的項目結構組織
• 嚴格模式 及 嚴格模式下的表單v-model的處理
• vuex的測試
• vuex的熱重載

vuex 概念

在前面總結過組件間通訊的幾種方式，都有相應的適用的場景。在大型項目中，當組件樹層級愈來愈多，組件間的通訊也就愈來愈麻煩和複雜，特別當多個組件依賴於某些共同的數據，或者不一樣的組件須要能變動某一個數據時，還要保持狀態的響應式的情形下，咱們不得不考慮採起一種更好的方式去組織代碼。

所以，咱們考慮把組件全部共享的數據抽取出來，以一個全局單例的模式統一管理，咱們要實現，在這種組織方式下，無論組件樹的哪一個節點，都能獲取數據或者改變數據，而且依賴此數據的其它組件也能即時獲取改變後最新的數據。把這些組件依賴的數據做爲狀態量進行統一管理，這就是狀態管理。

在狀態管理中，咱們須要定義一些統一的概念和約定一些強制性的規則來方便管理，以此實現狀態的改變可被追蹤和可被預測。

這就是vuex產生的背後思想，它是專門爲vue設計的狀態管理庫，充分複用了vue的數據響應機制來使得狀態的改變也是響應式的。多個依賴於同一狀態的組件，其中任何一個組件改變了某個依賴狀態，其它組件也會也會相應地獲得高效的更新。

在vuex中，咱們定義了以下幾個概念和約定規則：

• state： 存放整個應用共享的狀態（數據源）；
• getter： 當多個組件對獲取同一個state須要進行計算或轉換成合適可用的狀態時，對共同轉換邏輯的抽離，相似計算屬性
• mutation： 同步變動某個狀態量的惟一方法；
• action： 組件中須要異步觸發某一狀態量改變，此時派發一個aciton，觸發管理這個狀態量的mutation來變動這個狀態量。
• module： 當項目狀態管理更爲複雜時，能夠根據項目結構定義多個模塊，每一個模塊都有本身的state/getter/mutation/action。爲了多個模塊或模塊與全局倉庫的隔離，能夠對模塊進行命名，造成模塊的命名空間，具備命名空間的模塊依然能夠獲取全局狀態，在邏輯中也能夠動態註冊模塊。
• store： 以上這些狀態和方法都定義在store中，相似一個倉庫，存放數據源，以及獲取和變動數據的方法。一個vue實例全局只能有一個store。store對象就至關一個vuex的實例對象。

vuex 使用

// 1. 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 在vue中註冊vuex插件
Vue.use(Vuex)

// 3. 實例化一個管理狀態的倉庫store
const store = new Vuex.Store({
    state:{},
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

// 4. 將store 全局注入到vue實例
const app = new Vue({
    el: "#app",
    // 把 store 對象提供給 「store」 選項，這樣就能夠把 store 的實例注入全部的子組件
    store,
    // 其它代碼...
})

// 5. 組件中使用 this.$store
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

總結下約定的規則，簡單的說就是：commit mutation，dispatch action