前面的話 本文將詳細介紹Vuex的API文檔 概述 【構造器選項】 state Vuex store 實例的根 state 對象 mutations 在 store 上註冊 mutation,處理函數總是接受 state 作為第一個參數(如果定義在模塊中,則為模塊的局部狀態),payload 作為第 ...
前面的話
本文將詳細介紹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
的對象。它們都已經綁定在了給定的命名空間上