1. 程式人生 > 程式設計 >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,只存在於模組中
 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,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

更多關於VUEX方面的相關知識請點選下面的相關連結