Vuex的API文檔

前面的話

　　本文將詳細介紹Vuex的API文檔

 

概述

import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })

【構造器選項】

state

類型: Object

　　Vuex store 實例的根 state 對象

mutations

類型: { [type: string]: Function }

　　在 store 上註冊 mutation，處理函數老是接受 state 做爲第一個參數（若是定義在模塊中，則爲模塊的局部狀態），payload 做爲第二個參數（可選）

actions

類型: { [type: string]: Function }

　　在 store 上註冊 action。處理函數接受一個 context 對象，包含如下屬性：

{
  state,     // 等同於 store.state, 若在模塊中則爲局部狀態
  rootState, // 等同於 store.state, 只存在於模塊中
  commit,    // 等同於 store.commit
  dispatch,  // 等同於 store.dispatch
  getters    // 等同於 store.getters
}

getters

類型: { [key: string]: Function }

　　在 store 上註冊 getter，getter 方法接受如下參數：

 state,     // 若是在模塊中定義則爲模塊的局部狀態
 getters,   // 等同於 store.getters

　　當定義在一個模塊裏時會特別一些

  state,       // 若是在模塊中定義則爲模塊的局部狀態
  getters,     // 等同於 store.getters
  rootState    // 等同於 store.state
  rootGetters  // 全部 getters

　　註冊的 getter 暴露爲 store.getters

modules

類型: Object

　　包含了子模塊的對象，會被合併到 store

{
  key: {
    state,
    namespaced?,
    mutations,
    actions?,
    getters?,
    modules?
  },
  ...
}

　　與根模塊的選項同樣，每一個模塊也包含 state 和 mutations 選項。模塊的狀態使用 key 關聯到 store 的根狀態。模塊的 mutation 和 getter 只會接收 module 的局部狀態做爲第一個參數，而不是根狀態，而且模塊 action 的 context.state 一樣指向局部狀態

plugins

類型: Array<Function>

　　一個數組，包含應用在 store 上的插件方法。這些插件直接接收 store 做爲惟一參數，能夠監聽 mutation（用於外部地數據持久化、記錄或調試）或者提交 mutation （用於內部數據，例如 websocket 或 某些觀察者）

strict

類型: Boolean
默認值: false

　　使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數之外修改 Vuex state 都會拋出錯誤

 

實例屬性

state

類型: Object

　　根狀態，只讀

getters

類型: Object

　　暴露出註冊的 getter，只讀

 

實例方法

commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)

　　提交 mutation。options 裏能夠有 root: true，它容許在命名空間模塊裏提交根的 mutation

dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)

　　分發 action。options 裏能夠有 root: true，它容許在命名空間模塊裏分發根的 action。返回一個解析全部被觸發的 action 處理器的 Promise

replaceState(state: Object)

　　替換 store 的根狀態，僅用狀態合併或時光旅行調試

watch(getter: Function, cb: Function, options?: Object)

　　響應式地監測一個 getter 方法的返回值，當值改變時調用回調函數。getter 接收 store 的狀態做爲惟一參數。接收一個可選的對象參數表示 Vue 的 vm.$watch 方法的參數。

　　要中止監測，直接調用返回的處理函數

subscribe(handler: Function)

　　註冊監聽 store 的 mutation。handler 會在每一個 mutation 完成後調用，接收 mutation 和通過 mutation 後的狀態做爲參數

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

　　一般用於插件

registerModule(path: string | Array<string>, module: Module)

　　註冊一個動態模塊

unregisterModule(path: string | Array<string>)

　　卸載一個動態模塊

hotUpdate(newOptions: Object)

　　熱替換新的 action 和 mutation

 

輔助函數

mapState(namespace?: string, map: Array<string> | Object): Object

　　爲組件建立計算屬性以返回 Vuex store 中的狀態。第一個參數是可選的，能夠是一個命名空間字符串

mapGetters(namespace?: string, map: Array<string> | Object): Object

　　爲組件建立計算屬性以返回 getter 的返回值。第一個參數是可選的，能夠是一個命名空間字符串

mapActions(namespace?: string, map: Array<string> | Object): Object

　　建立組件方法分發 action。第一個參數是可選的，能夠是一個命名空間字符串

mapMutations(namespace?: string, map: Array<string> | Object): Object

　　建立組件方法提交 mutation。第一個參數是可選的，能夠是一個命名空間字符串

createNamespacedHelpers(namespace: string): Object

　　建立基於命名空間的組件綁定輔助函數。其返回一個包含 mapState、mapGetters、mapActions 和 mapMutations 的對象。它們都已經綁定在了給定的命名空間上