Vuex中g(shù)etters和actions的使用補(bǔ)充說明
前置說明
1.Vue2.x 和 Vue3.x區(qū)別:
- 在Vue3.x中, 沒有輔助函數(shù).
- 其他關(guān)于Vuex的使用沒有區(qū)別.
2. 此處只對(duì)于Vuex的幾個(gè)屬性中的使用做擴(kuò)展補(bǔ)充.
getters補(bǔ)充
當(dāng)getters寫在子模塊中時(shí), getters屬性中的方法, 全參共有4個(gè)參數(shù)
getters: { /** * 形參說明: * state: 表示當(dāng)前模塊中的satate * getters: 表示當(dāng)前模塊中的getters對(duì)象, 一般是操作同級(jí)的其他方法 * rootState: 表示主模塊的satate對(duì)象 * rootGetters 表示主模塊的getters對(duì)象 * * 主模塊也就是-index.js中 */ getName(state, getters, rootState, rootGetters){ // 使用說明 // state、getters直接調(diào)用即可 // rootState.模塊名.屬性名 // rootGetters['模塊名/該子模塊下的getters方法名'] // 除了state使用.調(diào)用以外, 其他都是用[''],符合命名規(guī)范的問題 }, ....... }
actions補(bǔ)充
當(dāng)actions寫在子模塊中時(shí), actions中的方法, 第一個(gè)形參 context
對(duì)象中, 會(huì)有6個(gè)對(duì)象(還有別的屬性, 只有這6個(gè)提供給開發(fā)者使用)
定義
// 子模塊中的actions actions: { /** * 參數(shù)一: context 是一個(gè)對(duì)象, 如果當(dāng)前actions定義在子模塊中, * context中會(huì)有以下6個(gè)提供給開發(fā)者使用的對(duì)象 * * 1. commit:調(diào)用mutations * (1).本模塊調(diào)用:commit('本模塊mutations方法名', 實(shí)參) * (2).其它模塊調(diào)用:commit('模塊名/其它模塊的mutations方法名', 實(shí)參,{root:true}), * {root:true}固定參數(shù), 表示作為主模塊去調(diào)用的意思 * 2. state:獲取當(dāng)前模塊的state * 3. dispatch:調(diào)用actions方法 * (1).本模塊調(diào)用:dispatch('本模塊的actions方法名', 實(shí)參) * (2).其它模塊的調(diào)用:dispatch('模塊名/其它模塊的actions方法名',null,{root:true}) * 4. getters:獲取當(dāng)前模塊的getters * 5. rootState:主模塊下的state * 6. rootGetters:主模塊下的getters * * 參數(shù)二: value是組件中調(diào)用時(shí)傳遞的參數(shù) */ refreshUserName(context, value){ setTimeout(()=>{ store.commit('mutations方法名',實(shí)參值) },2000) } }
調(diào)用(Vue3.x)
import {useStore} from 'vuex' setup(){ const store=useStore() // store===this.$store store.dispatch('模塊名/actions方法名',參數(shù)值) }
開發(fā)中, 如果要使用上述6個(gè)對(duì)象, 都必須通過 context.
來獲取需要的對(duì)象, 可以通過解構(gòu), 直接獲取
以下是官網(wǎng)的示例:
以上就是Vuex中g(shù)etters和actions的使用補(bǔ)充說明的詳細(xì)內(nèi)容,更多關(guān)于Vuex中g(shù)etters和actions使用補(bǔ)充的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue 解決computed修改data數(shù)據(jù)的問題
今天小編就為大家分享一篇vue 解決computed修改data數(shù)據(jù)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)
這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12antfu大佬的v-lazy-show教我學(xué)會(huì)了怎么編譯模板指令
這篇文章主要介紹了antfu大佬的v-lazy-show,我學(xué)會(huì)了怎么編譯模板指令示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01