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

