Vuex的使用（八）——actions和mapActions的用法 - CSDN博客

运行后点击mapActions按钮可以看到一秒后state发生了变化，这表示actions可以以异步的方式来调用mutations ... Vuex的使用（八）——actions和mapActions的用法 讨厌走开啦 于 2021-09-0922:52:25 发布 1272 收藏 1 分类专栏： Vue 文章标签： vue.js javascript actions mapActions Vuex 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/lqlqlq007/article/details/120194711 版权 Vue 专栏收录该内容 32篇文章 1订阅 订阅专栏 参考文档：https://vuex.vuejs.org/zh/guide/ actions功能与mutations相近，区别主要有以下两点： actions不能直接改变state，只能通过调用mutation来改变state（mutations不能调用mutations，但是actions可以）；mutations只能执行同步操作，而actions可以执行异步操作。

如果我们把state、getters、mutations和actions一股脑全部定义在一个文件里，会导致Vuex的定义文件非常臃肿，因此在下面的例子里我们尝试把actions拆出来。

首先需要单独定义actions（新增文件路径为src\store\action.js），代码如下： exportdefault{ //context对象中包含state、commit和dispatch，分别对应Vuex中的state、执行mutations方法和执行actions方法 action1:context=>{ setTimeout(()=>{ context.commit("mutation1"); },1000); } }; 然后在Vuex中引入并声明actions（修改文件路径为src\store\index.js），代码如下： importVuefrom"vue"; importVuexfrom"vuex"; importactionfrom"./action"; Vue.use(Vuex); conststore=newVuex.Store({ state:{ param1:"stateparam" }, getters:{ param2:state=>{ return`new${state.param1}`; }, //在getters中可以使用其他getters param3:(state,getters)=>{ return`another${getters.param2}`; }, //getter支持返回一个函数 param4:state=>index=>{ returnstate.paramArray[index]; } }, //mutations不支持相互调用（如下面的mutation1不能调用mutation2） mutations:{ mutation1:state=>{ //在mutations的回调函数内可以修改state的值 state.param1+="addsomething"; }, //mutations支持传递参数（第二个参数） mutation2:(state,addString)=>{ state.param1+=addString; } }, actions:action }); exportdefaultstore; 接下来在组件中引入并调用（新增文件路径为src\components\componentG.vue），代码如下： 最后引用上面创建的component-g查看效果（修改文件路径为src\main.js），代码如下： importVuefrom'vue' importstorefrom'./store' importComponentAfrom'./components/ComponentA.vue' importComponentBfrom'./components/ComponentB.vue' importComponentCfrom'./components/ComponentC.vue' importComponentDfrom'./components/ComponentD.vue' importComponentEfrom'./components/ComponentE.vue' importComponentFfrom'./components/ComponentF.vue' importComponentGfrom'./components/ComponentG.vue' newVue({ el:'#app', store, components:{ComponentA,ComponentB,ComponentC,ComponentD,ComponentE,ComponentF,ComponentG}, template:'

' }); 运行后点击mapActions按钮可以看到一秒后state发生了变化，这表示actions可以以异步的方式来调用mutations。

讨厌走开啦 关注 关注 0 点赞 踩 0 评论 1 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 参与评论 您还未登录，请先 登录 后发表或查看评论 相关推荐 vuex2中使用mapGetters/mapActions报错的解决方法 10-17 主要介绍了vuex2中使用mapGetters/mapActions报错解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下 vuex中mapActions用法详解 liweibo348的博客 12-29 7362 一般而言，我们使用this.$store.dispatch('xxx')来触发action操作，有多少action需要被触发，就需要写多少个this.$store.dispatch('')方法； 从而更加简便的方式出现了，他就是mapActions，mapActions就是将组件中的事件函数映射为对应的action，其中事件函数名称与action名称应该是一样的，写法如下: mapAct... vue中vuex的详解 热门推荐 关注最新技术问题并持续维护更新 04-26 4万+ 概念     Vuex是一个专为Vue.js应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装 HTML中使用script标签引入 ... 08Vue3-Vuex的Action异步处理 qq_33290233的博客 05-18 401 actions异步处理 Home.vue