快捷導(dǎo)航

vuex?mutation?action同級(jí)調(diào)用方式

更新時(shí)間：2022年03月28日 12:02:48 作者：zhooson

這篇文章主要介紹了vuex?mutation?action同級(jí)調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

mutation action同級(jí)調(diào)用

mutatiion同級(jí)調(diào)用：this.commit
action同級(jí)調(diào)用：this.dispatch

// 同步
const mutations = {
    add(state, payload) {
        state.countB += 10
    },
    plus(state, payload) {
        this.commit('add')
    }
}
// 異步（定時(shí)器等）
const actions = {
    addCountBAction({ state, commit }, payload) {
        commit('add', payload)
    },
    plusCountBToAAction({ state, commit, dispatch, getters, rootState, rootGetters }, payload) {
        // https://vuex.vuejs.org/zh/api/#actions
         setTimeout(() => {
        		dispatch('addCountBAction')
         }, 2000);
        // 或者 thiis.dispatch('addCountBAction')
    }
}

mutation和action區(qū)別

const store = new Vuex.Store({
　　state: {
　　　　count: 0
　　},
　　mutations: {
　　　　increment (state) {
　　　　　　state.count++
　　　　}
　　},
　　actions: {
　　　　increment (context) {
　　　　　　context.commit('increment')
　　　　}
　　}
})

1、流程順序

“相應(yīng)視圖—>修改State”拆分成兩部分，視圖觸發(fā)Action，Action再觸發(fā)Mutation。

2、角色定位

基于流程順序，二者扮演不同的角色。

Mutation：專(zhuān)注于修改State，理論上是修改State的唯一途徑。
Action：業(yè)務(wù)代碼、異步請(qǐng)求。

3、限制

角色不同，二者有不同的限制。

Mutation：必須同步執(zhí)行。
Action：可以異步，但不能直接操作State。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3中reactive不能直接賦值的解決方案
這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue-scroller記錄滾動(dòng)位置的示例代碼
本篇文章主要介紹了vue-scroller記錄滾動(dòng)位置的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
詳解Vue Cli瀏覽器兼容性實(shí)踐
這篇文章主要介紹了詳解Vue Cli瀏覽器兼容性實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue+Echart實(shí)現(xiàn)立體柱狀圖
這篇文章主要為大家詳細(xì)介紹了vue+Echart實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue中this.$nextTick()的具體使用
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue路由傳遞query參數(shù)兩種方式
路由是可以傳遞參數(shù)的，一般使用query進(jìn)行傳參，有兩種方式，本溫酒通過(guò)代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀
2023-06-06
一次搞清Vue3中組件通訊的全部方式
毫無(wú)疑問(wèn),組件通訊是Vue中非常重要的技術(shù)之一,它的出現(xiàn)能夠使我們非常方便的在不同組件之間進(jìn)行數(shù)據(jù)的傳遞,以達(dá)到數(shù)據(jù)交互的效果,所以,學(xué)習(xí)組件通訊技術(shù)是非常有必要的,本文將一次解決Vue3中組件通訊的全部方式,總有你想要的那一種,需要的朋友可以參考下
2024-09-09
vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例
本篇文章主要介紹了vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
vue element-ui el-cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法
這篇文章主要介紹了vue element-ui el-cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2023-07-07
Vue3?echarts組件化及使用hook進(jìn)行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進(jìn)行resize方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04