vuex：mutations一个方法需要调用另外一个方法

已于 2022-11-02 16:17:37 修改
阅读量1.5k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue vue随记 文章标签： vue.js javascript 前端
于 2022-04-07 22:17:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46221198/article/details/124028202
本文介绍了在 Vuex 中如何在 mutations 方法内部调用其他 mutations。当未使用模块化时，可以使用 `this.commit('function')` 直接调用，确保不使用箭头函数以保持正确的 `this` 指向。而在采用模块化的设置中，需要使用全路径的 `commit`，如 `this.commit('moduleName/mutationName')` 来实现跨模块的方法调用。

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

文章目录

1.mutations一个方法需要调用另外一个方法

参考 : 链接
解决：

  1. 没用模块化:
    在vuex中的mutations方法，想调用mutations中的另外一方法，还是用commit,只需要使用this.commit('function')，当前的this指向的就是当前模块中的mutations；得写成function的形式，不要写成()=>｛｝的形式，否则this绑定不到router。
  2. 用了模块化:
    如果使用了moudule的形式了，commit里面要加全路径的形式（跟外部写法类似）
    在这里插入图片描述
[Vuex]中子模块互相调用mutations函数
weixin_51290060的博客
03-03 1122
Vuex中子模块互相调用mutations函数
Vue实战指南：Vuex中mutations详解与actions的区别
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 1988
,
vuex中调用mutations的两种方法
SYQ15544423296的博客
09-13 2249
vuex调用mutations
vuex中mutations一个方法需要调用另外一个方法
热门推荐
aliven1的博客
12-13 3万+
在vuex中的mutations方法，想调用mutations中的另外一方法，还是用commit,只需要使用this.commit('function')，当前的this指向的就是当前模块中的mutations；
（踩坑）Vuex中，Mutations中的方法如何互相调用
huangY_S的博客
06-15 1万+
理论上来说，使用this.commit('函数 ')即可调用另一个Mutations方法 但是一般项目我们会使用Module来分割多个模块，那我们就要使用this.commit(’ 模块名/函数 ')的方法来调用 即便是在同一个模块下,Mutations中的其中一个方法回调另一个方法时，也需要用this.commit(’ 模块名/函数 ')的方式来调用 ...
vuex同一mutations中不同方法的调用
qq_45618033的博客
10-28 774
1.采用递归调用的方法------适合相同代码的复用。2.同一mutation中不同方法的调用。
vuex实现像调用模板方法一样调用Mutations方法
10-16
在Vue.js应用中，Vuex是一个非常重要的状态管理库，它允许我们集中管理全局的状态，使得数据在组件之间共享变得更加方便。在Vuex中，Mutations是用于改变State的唯一途径，通常我们在模板中调用它们时需要通过`$...
Vuex中的Mutations的具体使用方法
11-20
Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用...
在Vue-cli里应用Vuex的state和mutations方法
01-19
首先，必须安装vuex的依赖 ...之后，我们就可以在组件当中，调用到我们在vuex存放的变量和方法： 首先：在父组件调用变量headTitle: 需要用到计算属性computed和vuex的mapState:(注释的写法也可以，但是mapSta
vuex--mutation的两种调用方式
weixin_43755104的博客
07-27 2937
文章目录方法1方法2 方法1 在store.js的mutations中写函数 例如 mutations: { addN(state,step) { state.count += step } } 在用到vuex的组件中调用 在methods中写 例如 methods: { handle2() { this.$store.commit('addN',3) } } 方法2 在store.js的mutations中写函数 例如 mutations: { addN(state,step) {
vuex 多模块时 模块内部的mutation和action的调用方式
10-15
主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex模块化，如何相互调用（mutations，actions，getters）
LJX9738的博客
12-13 1万+
先写好两个模块 A模块 const ceshi1 = { namespaced: true, state: { title:'我是测试1State数据' }, mutations: { }, actions: {} }; export default ceshi1; B模块 const ceshi2 = { namespaced: true, state: { title: '我是测试2Sta
store中分模块，一个模块调用另一个模块的mutations
muzidanwu的博客
08-01 1258
后台管理系统动态路由里面遇到了登录之后页面显示空白，刷新一下，就正常了。差了好多资料，发现是退出登录的时候清除了user缓存，但是再次登录的时候缓存又赋值了。但是我判断动态路由是否重新加载是根据user判断的。所以在resetRouter()后，没有走重新设置路由的方法，直接next()了。后来把缓存里的router清除，重新给路由赋值，解决。第三个参数设置{roottrue}，注意是第三个参数！...
vuex中的mutations的两种调用方法
程序员徐小白的博客
04-19 1万+
直接通过$store.commit调用 <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button> 不需要再进行其他配置 通过在methods中注册方法调用 //先引入mapMutations import {mapMutations} from 'vuex' export defau...
vuex导入_挑战全网最幽默的Vuex系列教程：第三讲 Vuex旗下的Mutation
weixin_39710041的博客
12-13 153
写在前面上一讲「Vuex 旗下的 State 和 Getter」，告诉了我们怎么去使用仓库 store 中的状态数据。当然，光会用肯定还不够，大部分的应用场景还得对这些状态进行操控，那么具体如何操控呢，这就是这一讲要说的重点。只有 mutation 能动 State更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件...
mutations vuex 调用_Vuex之理解Mutations的用法实例
weixin_39708854的博客
12-20 578
1.什么是mutations？通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。2.怎么用mutations？mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有...
调用Mutation函数的方式
weixin_46370867的博客
02-27 3269
文章目录调用Mutation函数的方式第一种：this.$store.commit()第二种：将指定的 mutations函数，映射为当前组件的methods函数减法计算器应用实例 调用Mutation函数的方式 第一种：this.$store.commit() // 触发mutation methods: { handle1() { //触发mutations的第一种方式 this.$store.commit ( 'add ' ) } } 可以在触发mut
JavaScript(四)：DOM、BOM、事件处理、对象与原型
算云烟
12-07 836
一、DOM 1. DOM简介 ​ Document Object Model 文档对象模型 ​ 浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树 HTML文档和DOM树是一一对应的关系 当DOM树被改变时，与之对应的HTML文档也会随之改变 当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作 DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件 树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档 2. 查询操作
Vuex调用同级方法（actions、mutations）
文龙刚的博客
09-12 317
【代码】Vuex调用同级方法（actions、mutations）
Vuex中Mutations中的方法如何互相调用
06-06
在Vuex的Mutations中，可以使用this.commit('mutationName', payload)来调用同一个Mutations中的其他方法。需要注意的是，调用其他Mutations方法时，需要使用this.commit而不是this.$commit，因为this.$commit是全局的，会调用store中的其他module的Mutations。 下面是一个例子，其中有两个Mutations方法，分别是increment和doubleIncrement，doubleIncrement方法会调用increment方法： ``` const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, doubleIncrement (state) { this.commit('increment') this.commit('increment') } } }) store.commit('doubleIncrement') console.log(store.state.count) // 输出 2 ``` 在doubleIncrement方法中，调用了increment方法两次，因此state.count的值会增加2。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值