Vuex中的API怎么使用

今天小編給大家分享一下Vuex中的API怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

構(gòu)造器選項(xiàng)

state

類型: Object

Vuex store 實(shí)例的根 state 對(duì)象

mutations

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

在 store 上注冊(cè) mutation，處理函數(shù)總是接受 state 作為第一個(gè)參數(shù)（如果定義在模塊中，則為模塊的局部狀態(tài)），payload 作為第二個(gè)參數(shù)（可選）

actions

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

在 store 上注冊(cè) action。處理函數(shù)接受一個(gè) context 對(duì)象，包含以下屬性：

{
 state,   // 等同于 store.state, 若在模塊中則為局部狀態(tài)
 rootState, // 等同于 store.state, 只存在于模塊中
 commit,  // 等同于 store.commit
 dispatch, // 等同于 store.dispatch
 getters  // 等同于 store.getters
}

getters

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

在 store 上注冊(cè) getter，getter 方法接受以下參數(shù)：

 state,     // 如果在模塊中定義則為模塊的局部狀態(tài)

 getters,   // 等同于 store.getters

當(dāng)定義在一個(gè)模塊里時(shí)會(huì)特別一些

  state,       // 如果在模塊中定義則為模塊的局部狀態(tài)

  getters,     // 等同于 store.getters

  rootState    // 等同于 store.state

  rootGetters  // 所有 getters

注冊(cè)的 getter 暴露為 store.getters

modules

類型: Object

包含了子模塊的對(duì)象，會(huì)被合并到 store

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

與根模塊的選項(xiàng)一樣，每個(gè)模塊也包含 state 和 mutations 選項(xiàng)。模塊的狀態(tài)使用 key 關(guān)聯(lián)到 store 的根狀態(tài)。模塊的 mutation 和 getter 只會(huì)接收 module 的局部狀態(tài)作為第一個(gè)參數(shù)，而不是根狀態(tài)，并且模塊 action 的 context.state 同樣指向局部狀態(tài)

plugins

類型: Array<Function>

一個(gè)數(shù)組，包含應(yīng)用在 store 上的插件方法。這些插件直接接收 store 作為唯一參數(shù)，可以監(jiān)聽 mutation（用于外部地?cái)?shù)據(jù)持久化、記錄或調(diào)試）或者提交 mutation （用于內(nèi)部數(shù)據(jù)，例如 websocket 或 某些觀察者）

strict

類型: Boolean

默認(rèn)值: false

使 Vuex store 進(jìn)入嚴(yán)格模式，在嚴(yán)格模式下，任何 mutation 處理函數(shù)以外修改 Vuex state 都會(huì)拋出錯(cuò)誤

實(shí)例屬性

state

類型: Object

根狀態(tài)，只讀

getters

類型: Object

暴露出注冊(cè)的 getter，只讀 

實(shí)例方法

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)

分發(fā) action。options 里可以有 root: true，它允許在命名空間模塊里分發(fā)根的 action。返回一個(gè)解析所有被觸發(fā)的 action 處理器的 Promise

replaceState(state: Object)

替換 store 的根狀態(tài)，僅用狀態(tài)合并或時(shí)光旅行調(diào)試

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

響應(yīng)式地監(jiān)測(cè)一個(gè) getter 方法的返回值，當(dāng)值改變時(shí)調(diào)用回調(diào)函數(shù)。getter 接收 store 的狀態(tài)作為唯一參數(shù)。接收一個(gè)可選的對(duì)象參數(shù)表示 Vue 的 vm.$watch 方法的參數(shù)。

要停止監(jiān)測(cè)，直接調(diào)用返回的處理函數(shù)

subscribe(handler: Function)

注冊(cè)監(jiān)聽 store 的 mutation。handler 會(huì)在每個(gè) mutation 完成后調(diào)用，接收 mutation 和經(jīng)過 mutation 后的狀態(tài)作為參數(shù)

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

通常用于插件

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

注冊(cè)一個(gè)動(dòng)態(tài)模塊

unregisterModule(path: string | Array<string>)

卸載一個(gè)動(dòng)態(tài)模塊

hotUpdate(newOptions: Object)

熱替換新的 action 和 mutation

輔助函數(shù)

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

為組件創(chuàng)建計(jì)算屬性以返回 Vuex store 中的狀態(tài)。第一個(gè)參數(shù)是可選的，可以是一個(gè)命名空間字符串

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

為組件創(chuàng)建計(jì)算屬性以返回 getter 的返回值。第一個(gè)參數(shù)是可選的，可以是一個(gè)命名空間字符串

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

創(chuàng)建組件方法分發(fā) action。第一個(gè)參數(shù)是可選的，可以是一個(gè)命名空間字符串

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

創(chuàng)建組件方法提交 mutation。第一個(gè)參數(shù)是可選的，可以是一個(gè)命名空間字符串

createNamespacedHelpers(namespace: string): Object

以上就是“Vuex中的API怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。