Vuex概念濃縮版記錄

state

讀取store的字段值,經過this.$store.state訪問

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'
])
複製代碼

也可使用對象展開運算符將此對象混入到外部對象中

localComputed () { /* ... */ },
  ...mapState({
    // ...
  })
複製代碼

使用 Vuex 並不意味着你須要將全部的狀態放入 Vuex。雖然將全部的狀態放到 Vuex 會使狀態變化更顯式和易調試，但也會使代碼變得冗長和不直觀。若是有些狀態嚴格屬於單個組件，最好仍是做爲組件的局部狀態。

getter

• Vuex 容許咱們在 store 中定義「getter」 （能夠認爲是 store 的計算屬性）。 getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。 Getter 接受 state 做爲其第一個參數
• Getter 會暴露爲 store.getters 對象，你能夠以屬性的形式訪問這些值
• Getter 也能夠接受其餘 getter 做爲第二個參數：

  getters: {
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
  複製代碼

mapGetters 輔助函數

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性，和mapState差很少，可使用別名映射

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
    
     // 把 `this.doneCount` 映射爲 `this.$store.getters.doneTodosCount`
     doneCount: 'doneTodosCount'
  }
}
複製代碼

Mutation

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。你不能直接調用一個 mutation handler，只能store.commit('increment')

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})

store.commit('increment') //至關於觸發事件increment
複製代碼

提交載荷（Payload）

你能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）,至關於觸發事件increment，看成事件更容易理解

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)
複製代碼

對象風格的提交方式

store.commit({
  type: 'increment',
  amount: 10
})
//當使用對象風格的提交方式，整個對象都做爲載荷傳給 mutation 函數
複製代碼

mapMutations 輔助函數

你能夠在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。注意可使用別名映射，和mapGetters中同樣

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 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。

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

分發 Action

Action 經過 store.dispatch 方法觸發

store.dispatch('increment')
複製代碼

在組件中分發 Action

和 mutation 差很少你在組件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用（須要先在根節點注入 store）

mapActions 輔助函數

和mapState,mapGetters,mapMutations做用一致,方便批量合併action

Module

Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊，至關於建立隔離的store實例，Module內部可使用命名空間，具體看官方文檔>>

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 的狀態

複製代碼

注意事項 ⚠️

• 提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。
• 提早在你的 store 中初始化好全部所需屬性,不然不能響應
• 輔助函數均可以使用別名
• dispatch返回Promise，能夠連續調用多個Action
• 應用層級的狀態應該集中到單個 store 對象中。
• 異步邏輯都應該封裝到 action 裏面。