Vuex中g(shù)etters和actions的使用補充說明
前置說明
1.Vue2.x 和 Vue3.x區(qū)別:
- 在Vue3.x中, 沒有輔助函數(shù).
- 其他關(guān)于Vuex的使用沒有區(qū)別.
2. 此處只對于Vuex的幾個屬性中的使用做擴展補充.
getters補充
當getters寫在子模塊中時, getters屬性中的方法, 全參共有4個參數(shù)
getters: {
/**
* 形參說明:
* state: 表示當前模塊中的satate
* getters: 表示當前模塊中的getters對象, 一般是操作同級的其他方法
* rootState: 表示主模塊的satate對象
* rootGetters 表示主模塊的getters對象
*
* 主模塊也就是-index.js中
*/
getName(state, getters, rootState, rootGetters){
// 使用說明
// state、getters直接調(diào)用即可
// rootState.模塊名.屬性名
// rootGetters['模塊名/該子模塊下的getters方法名']
// 除了state使用.調(diào)用以外, 其他都是用[''],符合命名規(guī)范的問題
},
.......
}
actions補充
當actions寫在子模塊中時, actions中的方法, 第一個形參 context對象中, 會有6個對象(還有別的屬性, 只有這6個提供給開發(fā)者使用)
定義
// 子模塊中的actions
actions: {
/**
* 參數(shù)一: context 是一個對象, 如果當前actions定義在子模塊中,
* context中會有以下6個提供給開發(fā)者使用的對象
*
* 1. commit:調(diào)用mutations
* (1).本模塊調(diào)用:commit('本模塊mutations方法名', 實參)
* (2).其它模塊調(diào)用:commit('模塊名/其它模塊的mutations方法名', 實參,{root:true}),
* {root:true}固定參數(shù), 表示作為主模塊去調(diào)用的意思
* 2. state:獲取當前模塊的state
* 3. dispatch:調(diào)用actions方法
* (1).本模塊調(diào)用:dispatch('本模塊的actions方法名', 實參)
* (2).其它模塊的調(diào)用:dispatch('模塊名/其它模塊的actions方法名',null,{root:true})
* 4. getters:獲取當前模塊的getters
* 5. rootState:主模塊下的state
* 6. rootGetters:主模塊下的getters
*
* 參數(shù)二: value是組件中調(diào)用時傳遞的參數(shù)
*/
refreshUserName(context, value){
setTimeout(()=>{
store.commit('mutations方法名',實參值)
},2000)
}
}
調(diào)用(Vue3.x)
import {useStore} from 'vuex'
setup(){
const store=useStore()
// store===this.$store
store.dispatch('模塊名/actions方法名',參數(shù)值)
}
開發(fā)中, 如果要使用上述6個對象, 都必須通過 context.來獲取需要的對象, 可以通過解構(gòu), 直接獲取
以下是官網(wǎng)的示例:
以上就是Vuex中g(shù)etters和actions的使用補充說明的詳細內(nèi)容,更多關(guān)于Vuex中g(shù)etters和actions使用補充的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
VueX學習之modules和namespacedVueX詳細教程
這篇文章主要為大家介紹了VueX學習之modules和namespacedVueX詳細教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06
使用 Vue-TCB 快速在 Vue 應用中接入云開發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應用中接入云開發(fā),本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
element日期時間選擇器限制時間選擇功能實現(xiàn)(精確到小時)
文章介紹了如何使用Element UI的DateTimePicker組件來實現(xiàn)一個時間選擇器,該選擇器只能選擇當前時間之后的7天,并且不能選擇當前小時,感興趣的朋友跟隨小編一起看看吧2025-01-01

