Vuex中Actions使用方法

查看Vuex的官方文檔中關(guān)于Actions的部分,發(fā)現(xiàn)并沒(méi)有關(guān)于參數(shù)傳遞的示例,又恰巧碰到了這個(gè)問(wèn)題,于是搜索查看了半天資料,將其使用方法整理了一下:

注意: actions中的方法只能有一個(gè)參數(shù)(payload),如果傳遞一個(gè)以上的參數(shù),多余的參數(shù)并不會(huì)被傳遞過(guò)去.

1.注冊(cè)Actions:

有兩種方式注冊(cè)Actions:

1.1 使用context注冊(cè)Actions

actions: {

  increment (context,payload) {

    context.commit('increment',payload)

  }

}

1.2 使用{commit}注冊(cè)Actions

actions: {

  increment ({commit},payload) {

    context.commit('increment',payload }

}

2.組件中分發(fā)Actions:

2.1 使用dispatch分發(fā):

methods:{
    increment(payload){
        return this.$store.increment;
    }
}

2.2 使用mapActions分發(fā):

import {mapActions} from 'vuex';
//這里無(wú)需傳遞參數(shù)
methods:{
    ...mapActions(['increment'])
}

3.組件中使用Actions:

<button v-on:click="increment(payload)">increment</button>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 安裝 npm npm install vuex --save 在一個(gè)模塊化的打包系統(tǒng)中,您必須顯式地通過(guò)Vue.u...
    蕭玄辭閱讀 3,038評(píng)論 0 7
  • 上一章總結(jié)了 Vuex 的框架原理,這一章我們將從 Vuex 的入口文件開(kāi)始,分步驟閱讀和解析源碼。由于 Vuex...
    你的肖同學(xué)閱讀 1,888評(píng)論 3 16
  • vuex 場(chǎng)景重現(xiàn):一個(gè)用戶在注冊(cè)頁(yè)面注冊(cè)了手機(jī)號(hào)碼,跳轉(zhuǎn)到登錄頁(yè)面也想拿到這個(gè)手機(jī)號(hào)碼,你可以通過(guò)vue的組件化...
    sunny519111閱讀 8,163評(píng)論 4 111
  • Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)...
    白水螺絲閱讀 4,796評(píng)論 7 61
  • Vuex 是一個(gè)專(zhuān)為 Vue 服務(wù),用于管理頁(yè)面數(shù)據(jù)狀態(tài)、提供統(tǒng)一數(shù)據(jù)操作的生態(tài)系統(tǒng)。它專(zhuān)注于 MVC 模式中的 ...
    你的肖同學(xué)閱讀 2,199評(píng)論 7 35

友情鏈接更多精彩內(nèi)容