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寫(xiě)在子模塊中時(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寫(xiě)在子模塊中時(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)文章
VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開(kāi)發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開(kāi)發(fā),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
element日期時(shí)間選擇器限制時(shí)間選擇功能實(shí)現(xiàn)(精確到小時(shí))
文章介紹了如何使用Element UI的DateTimePicker組件來(lái)實(shí)現(xiàn)一個(gè)時(shí)間選擇器,該選擇器只能選擇當(dāng)前時(shí)間之后的7天,并且不能選擇當(dāng)前小時(shí),感興趣的朋友跟隨小編一起看看吧2025-01-01
詳解Vue如何實(shí)現(xiàn)響應(yīng)式布局
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)響應(yīng)式布局的兩種方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-12-12
Vue實(shí)現(xiàn)多點(diǎn)涂鴉效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)多點(diǎn)涂鴉效果,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
VueX如何實(shí)現(xiàn)數(shù)據(jù)共享
這篇文章主要介紹了VueX如何實(shí)現(xiàn)數(shù)據(jù)共享問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08

