Vuex中的actions的参数

最新推荐文章于 2024-09-16 03:58:35 发布

海绵杨宝宝

最新推荐文章于 2024-09-16 03:58:35 发布

阅读量1.7w

点赞数 19

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_41820577/article/details/100530155

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了Vuex中Actions的功能与使用，说明了Actions如何通过Commit改变状态，并支持异步操作。介绍了Action函数参数context的组成部分及其使用方法，通过解构赋值简化调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

actions可以说是mutation的加强版，它可以通过commit mutations中的方法改变状态，最重要的是它可以进行异步操作，在组件中通过$store.dispatch来触发action中定义的方法。

今天是要来说一下action函数的参数

一般在使用actions方法时我们会像下面的书写方式：

actions:{
    add_num({commit}){
        console.log({commit})
        setTimeout(() => {
            commit('change',100);
        },2000)
    }
}

而很多人都会疑惑{commit}是代表了什么，又是怎么来的。下面就来说一下，action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：

 context:{
		state,   等同于store.$state，若在模块中则为局部状态
		rootState,   等同于store.$state,只存在模块中
		commit,   等同于store.$commit
		dispatch,   等同于store.$dispatch
		getters   等同于store.$getters
}

常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的
位置写自己想要的属性，如：{commit}。