前端培訓-中級階段（41）- vue 2.x 狀態管理 vuex

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

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

五大核心模塊

• State，數據中心，能夠理解爲 Vue 中的 data。只不過爲了保持數據流向，須要用 store.commit('increment') 來修改（Mutation 內部再去修改 state），能夠更明確地追蹤到狀態的變化。

  • 獲取時可使用 store.state.count、this.$store.state.count、mapState

  • mapState 能夠接收對象和數組，能夠直接放在 computed: mapState({}) 上，也可使用展開運算符 computed: {localComputed () {}, ...mapState({})}

    • 對象形式

      mapState({
          // 箭頭函數可以使代碼更簡練
          count: state => state.count,
      
          // 傳字符串參數 'count' 等同於 `state => state.count`
          countAlias: 'count',
      
          // 爲了可以使用 `this` 獲取局部狀態，必須使用常規函數
          countPlusLocalState (state) {
            return state.count + this.localCount
          }
        })

    • 數組形式

      mapState([
        // 映射 this.count 爲 store.state.count
        'count'
      ])

• Getter，能夠理解爲 Vue 的 computed 計算屬性，返回值也會根據它的依賴被緩存起來，只有當它的依賴值發生了改變纔會被從新計算。

  • 獲取時可使用 store.getters.count、this.$store.getters.count、mapState

  • mapGetters

    • 單純的映射 ...mapGetters(['doneTodosCount','anotherGetter',])
    • 換個名字映射出來 ...mapGetters({doneCount: 'doneTodosCount'})

• Mutation 能夠理解爲methods ，也能夠理解爲 setState ，只不過 mutation 必須是同步函數，定義上來講是用來同步修改 state。

  • store.commit('increment') 不傳遞內容 increment (state, payload){payload == undefined}
  • store.commit('increment', 1) 傳遞數值 increment (state, payload){payload == 1}
  • store.commit('increment', {n:1}) 傳遞對象（推薦） increment (state, payload){payload == {n:1}}（我只是在描述內容是什麼，想測試能夠用 console.log）
  • ...mapMutations(['increment'])
  • ...mapMutations({add:'increment'})

將 this.add() 映射爲 this.$store.commit('increment')

• Action Action 提交的是 mutation，而不是直接變動狀態。Action 能夠包含任意異步操做。
  在 vue 中使用 mapActions 作快捷映射，也能夠不作映射直接使用 store.dispatch('increment')。
  dispatch 會返回一個 Promise ，因此咱們也能夠愉快的監聽異步是否執行完成。

• Module Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割：

  const moduleA = {
    namespaced: true,//經過namespaced開啓命名空間，默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在**全局命名空間**的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應。
    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 的狀態

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃