Vuex的API文檔說(shuō)明詳解
概述
import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })
構(gòu)造器選項(xiàng)
state
類(lèi)型: Object
Vuex store 實(shí)例的根 state 對(duì)象
mutations
類(lèi)型: { [type: string]: Function }
在 store 上注冊(cè) mutation,處理函數(shù)總是接受 state 作為第一個(gè)參數(shù)(如果定義在模塊中,則為模塊的局部狀態(tài)),payload 作為第二個(gè)參數(shù)(可選)
actions
類(lèi)型: { [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
類(lèi)型: { [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
類(lèi)型: 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
類(lèi)型: Array<Function>
一個(gè)數(shù)組,包含應(yīng)用在 store 上的插件方法。這些插件直接接收 store 作為唯一參數(shù),可以監(jiān)聽(tīng) mutation(用于外部地?cái)?shù)據(jù)持久化、記錄或調(diào)試)或者提交 mutation (用于內(nèi)部數(shù)據(jù),例如 websocket 或 某些觀察者)
strict
類(lèi)型: Boolean
默認(rèn)值: false
使 Vuex store 進(jìn)入嚴(yán)格模式,在嚴(yán)格模式下,任何 mutation 處理函數(shù)以外修改 Vuex state 都會(huì)拋出錯(cuò)誤
實(shí)例屬性
state
類(lèi)型: Object
根狀態(tài),只讀
getters
類(lèi)型: 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)聽(tīng) store 的 mutation。handler 會(huì)在每個(gè) mutation 完成后調(diào)用,接收 mutation 和經(jīng)過(guò) 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
更多關(guān)于VUEX方面的相關(guān)知識(shí)請(qǐng)點(diǎn)擊下面的相關(guān)鏈接
- Vuex模塊化應(yīng)用實(shí)踐示例
- 淺談vuex為什么不建議在action中修改state
- vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例
- 一看就會(huì)的vuex實(shí)現(xiàn)登錄驗(yàn)證(附案例)
- Vue-CLI與Vuex使用方法實(shí)例分析
- Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法
- 使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車(chē)功能的示例代碼
- VUEX-action可以修改state嗎
- vue-router結(jié)合vuex實(shí)現(xiàn)用戶(hù)權(quán)限控制功能
- 解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒(méi)值報(bào)錯(cuò)問(wèn)題
- VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
- 實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
- vuex管理狀態(tài) 刷新頁(yè)面保持不被清空的解決方案
- vuex實(shí)現(xiàn)數(shù)據(jù)狀態(tài)持久化
- vuex存儲(chǔ)token示例
- Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能
- VUE:vuex 用戶(hù)登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式
- Vue的狀態(tài)管理vuex使用方法詳解
相關(guān)文章
微信小程序 textarea 詳解及簡(jiǎn)單使用方法
這篇文章主要介紹了微信小程序 textarea 詳解及簡(jiǎn)單使用方法的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼,及解決textarea沒(méi)有bindchange事件,無(wú)法在輸入時(shí)給變量賦值的方法, 需要的朋友可以參考下2016-12-12微信小程序 自動(dòng)登陸PHP源碼實(shí)例(源碼下載)
這篇文章主要介紹了微信小程序 自動(dòng)登陸PHP源碼實(shí)例并且附有源碼的相關(guān)資料,需要的朋友可以參考下2017-05-05JavaScript實(shí)現(xiàn)放大鏡詳細(xì)
這篇文章主要介紹了js實(shí)現(xiàn)放大鏡,借助寬高等比例放大的兩張圖片,結(jié)合js中鼠標(biāo)偏移量、元素偏移量、元素自身寬高等屬性完成;左側(cè)遮罩移動(dòng)Xpx,右側(cè)大圖移動(dòng)X*倍數(shù)px,具體內(nèi)容請(qǐng)需要的小伙伴出差下面文章內(nèi)容2021-12-12PerformanceObserver自動(dòng)獲取首屏?xí)r間實(shí)現(xiàn)示例
今天給大家介紹一個(gè)非常好用的瀏覽器api:?PerformanceObserver?,?我們可以用它來(lái)獲取首屏、白屏的時(shí)間,就不用再麻煩地手動(dòng)去計(jì)算了2022-07-07Web?Components實(shí)現(xiàn)類(lèi)Element?UI中的Card卡片
這篇文章主要為大家介紹了Web?Components實(shí)現(xiàn)類(lèi)Element?UI中的Card卡片實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序 開(kāi)發(fā)之快遞查詢(xún)功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 開(kāi)發(fā)之快遞查詢(xún)功能的實(shí)現(xiàn)的相關(guān)資料,這里實(shí)現(xiàn)微信小程序查詢(xún)快遞的功能,需要的朋友可以參考下2017-01-01