vue 组件使用vuex中的mutations方法报错，报unknown mutation type的错误

已于 2022-04-14 09:45:34 修改
阅读量1.3w 收藏 7
点赞数 6
分类专栏： Vue 文章标签： 前端
于 2021-07-27 10:49:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58017645/article/details/119137636
版权

报错：【vuex】 unknown mutation type: mutation

vuex如果分为几个模块，方法是在某个模块中的话，如果直接在组件中通过this.$store.commit('方法名')是获取不到的，必须要在前面加上模块名，如this.$store.commit('模块名/方法名')才可以获取到。

在项目当中，我当前组件的vuex写在store/DataMonitorStore/DataMonitorStore.js里的，所以这里必须加上模块名。

当前组件是sliderBar.vue页，我需要在这个页面把数据存到vuex里面

使用this.$store.commit()方法进行存储

 当着组件是yearQueryContent.vue页，我需要在这个页面获取之前存储到vuex里的数据

使用this.$store.state.DataMonitorStore.value进行获取，同时注意这里的DataMonitorStore也是

模块名，一开始我在获取时没有写模块名，导致取出的数据一直是undefined。

 同时在该组件中还需要用到watch监听事件，去监听values是否有变化，若变化 则修改对应的src值。

vuex里面的内容如下：

一个小Pan桃❀
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vuex报错unknown mutation type:
qq_43742282的博客
04-22 2259
原始代码 错误原因：mutations中的increment用的小写，Vue建议用大写 解决方法：increment改成INCREMENT就可以了 const store = new Vuex.Store({ state: { counter: 1000 }, mutations: { //方法 increment(state) { state.counter++ }, } )} <div id="app"> ..
vue组件使用vuex中的方法报错，报[vuex]unknown mutation type:xxx的错误
World_Mei的博客
07-29 4483
vuex如果分为几个模块，方法是在模块中的话，如果直接在组件中通过this.$store.commit("方法名")是获取不到，必须要在前面加上模块名，如this.$store.commit("模块名/方法名")才可以获取到。 同理：页面中使用状态量this.$store.commit("模块名/状态量") ...
[vuex] unknown mutation type:‘‘报错解决方法
wuyongjun0811的博客
06-30 8732
vue项目中，使用this.$store.commit的时候控制台报错
[vuex] unknown mutation type
weixin_57246351的博客
09-14 2190
未知的mutation 类型 [vuex] unknown mutation type: menu/setMenuList 错误原因:vuex模块化不要忘了把响应的模块再导入index.js
vuex中unknown mutation type:的解决
csdn_hsr的博客
04-26 1万+
页面在使用invoice.js的mutations中方法时需要加上模块名，如图所示。 <script> import {mapState,mapMutations} from 'vuex' export default { data() { return { invoiceData: {} } }, computed: { ...mapState({ picker:state=>state.invoice.picker }),
unknown mutation type:
热门推荐
qq_38270306的博客
09-14 1万+
我这边使用得是vue+element vue得状态组成 actions 这个是异步请求 通过异步请求得话 然后在调用 mutations.js mutations.js 将数据提交到这里 this.$commit(‘test’,testTemp) index.js 这个是将数据初始化 getters 这个是将 this.$store.getters.test 就能获取到了 testTemp 写法是这个写法 最后得原因是因为我这在 index.js 和mutation.js 为定义常量##
vue-vuex中使用commit提交mutation来修改state的方法详解
10-18
今天小编就为大家分享一篇vue-vuex中使用commit提交mutation来修改state的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vuex 在Vue 组件中获得Vuex 状态state的方法
12-02
当在Vue实例中使用Vuex时，可以通过`this.$store`访问store实例，无需在每个组件中导入store。例如： ```javascript const Counter = { template: `<div>{{ counter }}</div>`, computed: { count() { return...
Git操作 Vue基本使用 Vue组件化 Vuex使用
12-03
通过`store`实例创建状态管理器，然后在组件中使用`mapState`、`mapActions`、`mapGetters`等辅助函数来便捷地获取和操作状态。当多个组件需要共享同一状态时，Vuex可以避免数据传递的复杂性，提高代码的可维护性...
Vue的状态管理vuex使用方法详解
10-15
Vue的状态管理是一个重要的概念，特别是在构建大型应用时，因为组件之间的状态共享和通信变得...在开发过程中，正确使用vuex能够显著提高团队协作效率，使Vue应用在处理大量状态和复杂业务逻辑时依然保持整洁和高效。
详解关于Vuex的action传入多个参数的问题
12-12
问题： 已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成 然而commit中只能传入两个参数，第一个就是mutations,第二个就是要传入的参数 一开始遇到的问题是加入购物车方法中要传入一个字典对象里面保存产品信息item，还要传入一个产品数量的参数num 然而如果这么写的话就会报错：context.commit(mutations,item,num) 解决办法： 将第二个参数以对象的放式提交就像这样 mutations = { PRODUCT_ADDTO_CART:(state,prod
unknown mutation type: xx/xx
weixin_52054945的博客
12-28 86
mutations里有几个方法，刚添加一个新的方法，页面使用新的方法报错，这是什么原因？
unknown mutation type SET_SINGER
Seety_ST的专栏
10-17 9006
问题：用vuex保存状态时出现了这个错误，以为是mutation-type SET_SINGER 写错了，然后前后检查了一遍没有错误找了好多文章也是出现了这样的错误（老版本的写法）https://segmentfault.com/q/1010000005955250我已经明确了自己有派发时间的了，然后最后检查了一下发现原来那些mutation getter action 后面都有s的，因此导致提交m
unknown mutation type: plan/SET_PLAN_INFO 以及多种方式调用分模块的mutaion
chpswg的专栏
10-28 500
通过module分类管理 store时 调用mutation 出现错误 原因：export 时命名空间写错，应该是namespaced:true，只有命名空间公开，才能用plan/SET_PLAN_INFO来调用 2、页面中调用时，有多种调用方式 a、直接调用this.$store.commit(‘plan/SET_PLAN_INFO’) b、引入mapMutations 在需要调用的组件import{mapGetters,mapMutations}from'vue...
VUEX模块化不同模块调用其它模块的mutations报错： [vuex] unknown mutation type: XXX
weixin_45491250的博客
04-13 1393
出现这个报错一般是在vueX的js或TS文件内引入了其它的JS文件使用，用以实现分割模块的效果，当我们调用Module内的内容时会出现unknown mutation type: XXX/XXX这种报错，下面看一下结构。 看一下目录结构：index.js是vueX中主文件。在同级新建了liuxu.js与test.js. 下面是将新建的模块文件引入的方式： 当我调用这两个模块中的mutations的时候，出现上面的报错，我的代码是这样写的 因为分模块了，所以我要调用liuxu或者test下面的mutation
Vuex 报错之 [vuex] unknown mutation type: handlePower
qq_45770253的博客
08-06 362
这里我才坑半天！！！ 如果你有设置一个类型常量，如下 那么你在 index.js 里面导入这个这个类型常量的时候，注意我红色框框里面，不能用 {} 将 mutations、actions、getters 包裹起来
[vuex] 报错unknown mutation type: xxxxx
qq_43592296的博客
07-13 667
解决方法：是mutations的单词拼写错误，改正即可 mutastions:{ increment(state){ state.counter++ }
Vuex报错：unknown mutation type: xxx
牛涵熙的博客
03-02 3929
vuex常见报错
vue3如使用vuex中mutations中写好的方法
最新发布
05-17
在 Vue 3 中，使用 Vuex 的方式与 Vue 2 中基本相同。首先需要在项目中安装 Vuex：`npm install vuex`。 然后在创建 Vue 应用时引入 Vuex 并将其挂载到应用中： ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#app') ``` 其中，`store` 是 Vuex 的实例，需要在 `store.js` 中定义。 在 `store.js` 中，可以定义状态、getters、mutations、actions 等。 如果要在组件中使用 mutations 中的方法，可以通过 `mapMutations` 辅助函数将 mutations 映射到组件的 methods 中。 ```javascript import { mapMutations } from 'vuex' export default { methods: { ...mapMutations({ increment: 'increment' // 将 mutations 中的 increment 映射到组件中的 increment 方法 }) } } ``` 然后就可以在组件中像调用普通方法一样调用 mutations 中的方法了： ```javascript this.increment() ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值