欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex中g(shù)etters和actions的使用補(bǔ)充說明

 更新時(shí)間:2021年09月24日 09:26:04   作者:SpringSir  
這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補(bǔ)充作了簡(jiǎn)要說明,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步

前置說明

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中destroyed方法及使用示例講解

    vue中destroyed方法及使用示例講解

    這篇文章主要為大家介紹了vue中destroyed方法及使用示例講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue 解決computed修改data數(shù)據(jù)的問題

    vue 解決computed修改data數(shù)據(jù)的問題

    今天小編就為大家分享一篇vue 解決computed修改data數(shù)據(jù)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 淺談Vue數(shù)據(jù)響應(yīng)

    淺談Vue數(shù)據(jù)響應(yīng)

    這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng),Vue的數(shù)據(jù)響應(yīng)主要是依賴了Object.defineProperty(),下面就具體來介紹一下如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)
    2018-11-11
  • vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng)

    vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng)

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)

    Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)

    這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • antfu大佬的v-lazy-show教我學(xué)會(huì)了怎么編譯模板指令

    antfu大佬的v-lazy-show教我學(xué)會(huì)了怎么編譯模板指令

    這篇文章主要介紹了antfu大佬的v-lazy-show,我學(xué)會(huì)了怎么編譯模板指令示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • Vue中xlsx的使用方法指南

    Vue中xlsx的使用方法指南

    這篇文章主要給大家介紹了關(guān)于Vue中xlsx的使用方法指南,有很多辦法都可以實(shí)現(xiàn),其中最簡(jiǎn)單的還是使用插件xlsx,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • 基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能

    基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能

    這篇文章主要介紹了基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • vuex的幾個(gè)屬性及其使用傳參方式

    vuex的幾個(gè)屬性及其使用傳參方式

    這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼

    vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-01-01

最新評(píng)論