vuex中mutation和action的区别

最新推荐文章于 2024-10-03 23:35:02 发布

aminsky0

最新推荐文章于 2024-10-03 23:35:02 发布

阅读量213

点赞数

分类专栏： vuex 前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_39065287/article/details/115400910

版权

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

vue

16 篇文章 0 订阅

订阅专栏

vuex

1 篇文章 0 订阅

订阅专栏

本文介绍了Vuex中mutation和action的区别。mutation负责同步更新store的状态，而action则用于处理异步操作，它会调用mutation来最终改变store。在示例中，increment mutation仅同步增加count值，而asyncIncrement action通过setTimeout异步调用increment mutation，展示了两者的不同。

摘要由CSDN通过智能技术生成

vuex中mutation和action的区别

mutation 同步操作store， action 异步操作mutation 然后修改store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count:1
    },
    getters: {
        newCount: state => state.count * 3
    },
    mutations: {
        increment: (state, value) => {
            console.log(value)
            state.count += value;
        }
    },
    actions: {
        asyncIncrement:({commit}) => {
            setTimeout(()=> {
                commit('increment', 1)
            }, 2000)
        }
    }
});