挖坑指南：在vuex的多个module中的getters里存在相同的方法名，使用mapGetters会报错？

最新推荐文章于 2024-04-28 11:24:59 发布
置顶 最新推荐文章于 2024-04-28 11:24:59 发布
阅读量7.9k 收藏 7
点赞数 2
分类专栏： 挖坑指南 Vue 文章标签： vuex vuex module vue mapGetters mapMutations
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39015132/article/details/84143962
版权

原文链接

前言

其实这个标题就是我们今天要谈论的话题。

开始

在vuex中有多个module是很正常滴，为了方便管理呢，我们有些module中使用了相同的名称。那么，在使用时，就会报错啦~

实践

其实在vuex的官网，已经为我们描述过啦~

vuex:https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4

接下来，我们看看如何在项目中使用它。

store/module/second.js

store/module/second.js

store/index.js

store/index.js

在页面中使用mapMutations

mapMutations

在页面中使用mapGetters

mapGetters

Ok，大功告成~

总结

嘘寒问暖 不如打笔巨款~

車句
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vuex中的getter和modules
Bioye_的博客
05-24 1354
Getter介绍 ①从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法 ②会返回一个新数据,不会影响到state里面的老数据 ③store中的数据发生变化.getter的数据也会跟着变化 举例: const store = new Vuex.store({ state:{ count:0 }, getters:{ userId1:function(state){ return state.count * 2 } } }) 它的使用方法: 第一种使用方式 thi
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在实际项目中，`vuex-demo-master`可能包含一个简单的Vuex配置示例，展示如何定义state、getters、actions和mutations，以及如何在组件中使用`map*`辅助函数。这些辅助函数大大简化了代码，提高了可读性和可维护性。...
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
08-27
在vuex中有四大金刚分别是State， Mutations，Actions，Getters，本文对这四大金刚做了详细介绍，本文重点是给大家介绍vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感兴趣的朋友一起看看吧
vuex框架使用（框架，模块化）
最新发布
m0_49936845的博客
04-28 1060
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它允许您在应用程序中的组件之间共享和管理状态。即vuex是管理器框架内部图：state：用于存储共享数据（就是所有组件都需要访问的数据，为了方便起见存到state中，这也是vuex的主要功能）mutation：用于数据state的基础操作（如果学过springmvc，相当于持久化层）actions：用于业务流程操作（相当于业务层）
【记录】VUEX不同modules内部变量/方法名字存在重复,如何引入对应modules方法
白云苍狗
07-27 1186
VUEX不同modules内部变量/方法名字存在重复,如何引入对应modules方法
关于使用Vuex getters属性报错
小陈的收藏
04-29 938
Computed property "editableTabsValue" was assigned to but it has no setter.问题解决 vuex的使用中报这个错误，原因是v-model双向绑定造成 vuex中是单项流，v-model是vue中的双向绑定，但是在computed中只通过get获取参数值，没有set无法改变参数值 解决方法：1.给editableTabsValue重新赋值给一个变量 设置getter，setter <el-tabs v-model=
Vue项目运行时报错：Cannot read property ‘getters‘ of undefined
m0_56860427的博客
08-17 4083
编译的时候正常但是在浏览器打开的时候就会报错Cannot read property 'getters' of undefined 就像这样，搜寻了一会儿后发现错误时store下的某个文件里的数据没有导出，所以导致store变成了undefined，导出后，程序编译和运行都正常了 ...
vue报错：Uncaught TypeError: Cannot read property ‘getters‘ of undefined
初心不改
08-18 4142
错误如下： 原因分析 由于自己本想在store目录下modules文件夹添加一个公共数据源，用来缓存数据供多个组件共享，但是尚未写完。故报此错误。 解决办法 将基本结构写完整就可以了。如下： 目录为： store/modules/xxx.js 新手持续自我摸索中… ...
对vuex中getters计算过滤操作详解
10-16
在 `store.js` 文件中，你需要先声明一个名为 `getters` 的对象，其中每个方法都是一个 getter 函数，该函数接收整个 `state` 作为参数并返回处理后的值。例如： ```javascript const getters = { num: ...
Uncaught Error: [vuex] getters should be function but "getters.getters" is {}
weixin_43942866的博客
08-08 3165
Uncaught Error: [vuex] getters should be function but “getters.getters” is {} [vuex] getters 的小坑 作为一名vue菜鸟,在看视频学习的过程中遇到一个问题，搞了1个多小时，没能解决，然后对源码才发现这个问题！！有点蠢 错误 贴出报错的代码 解决 将{ } 去掉就OK了！！！！ ...
Vuex实践（中）-多module中的state、mutations、actions和getters
盏茶作酒的博客
07-22 1456
一.前言 　　上一篇文章《Vuex入门实践（上）》，我们一共实践了vuex的这些内容： 　　1.在state中定义共享属性，在组件中可使用[$store.state.属性名]访问共享属性 　　2.在mutations可中定义修改共享数据的方法，在组件中可使用[$store.commit('方法名')]同步修改共享属性 　　3.在actions中可定义异步修改共享数据的方法，在组件中可使用[$store.dispatch('方法名')]异步修改共享属性 　　4.在getters中可定义共享数据的计算
Vuex（篇5-2）——modules中mutations
YanHSama的博客
07-26 1734
组件中调用vuex模块中的mutations（无参数） mutations: { add (state) { state.count++; } } 组件中调用模块/全局中的mutations 方式1 <button @click="addA">点击模块A</button> <br> <button @click="addB">点击模块B</button&
Vuex入门(三)—— getters,getters,...getters对象展开符详解
m0_49714202的博客
03-14 1349
目录1.store.js2.getter.vue组件getters详解 + 图片3.mapGetters.vue调用多个getters值,用mapGetters 和 ...mapGetters 用起来方便 Vuex官网:https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store 1.store.js Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库 import Vue from 'vue'
Vuex的store中的Module
qq_43203949的博客
01-01 8203
Vuex的store中的Module 1.单一状态树： 什么是单一状态树呢？单一状态树可以简单得理解成整个vuex中只有一个store对象。 这是官方对单一状态树的解释： Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new window))”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 但是当我们全部状
vuex在模块中getters和actions命名重复会冲突，用命名空间即可解决
qq_24882601的博客
05-29 5310
最近在做项目的时候，用了vuex的模块化模式，一开始没有什么问题 ，但是写到后面发现就出现问题了，打开控制台，发现这样的错误；百度之后发现是模块里面的getters方法的名字和根store里面的getters方法名字重复了。所以会报这样的错误，不仅仅是getters方法名字重复会报错，如果actions的名字也重复的话，那么这个action会执行多次，这就不是我们想要的效果了 ...
Vue笔记07
weixin_45081813的博客
02-26 200
文章目录VueX1.认识VueX2.状态管理3.vuex状态管理图例4.State单一状态树5.Getter的使用6.Mutation传递参数7.Mutation响应规则8.Mutation同步函数9.Action定义10.Module11.Module的mutation修改状态12.module的getters13.module中的actions的使用axios1.axios基本介绍2.axios的请求方式3.axios的使用 VueX 1.认识VueX 官方解释：Vuex 是一个专为 Vue.js 应用
报错：[vuex] duplicate getter key: list ——＞不同的模块有相同的名字，产生了冲突
qq_56715703的博客
03-04 586
解决：在每个有list命名的模块暴露中加入namespaced:true （启用命名空间）其默认值是false。之后在引入子模块的index.js中使用modules时，其内就是命名空间的名称。所以需要在mapGetters的属性值中加入此命名空间。问题：不同的模块有相同的名字list，产生了冲突。翻译是：重复的 getter 键: list。引入子模块 index.js。在User.vue中使用时。
vuex mapState mapGetters用法以及多个module模块下用法详解
weixin_46180366的博客
06-02 7419
在vuex，当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，例如 为了解决这个问题，我们可以使用 mapState和mapGetters 辅助函数帮助我们生成计算属性，让你少按几次键 2、字符串数组写法 除此之外，还有更简洁的写法 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组，类似于对象的key和value键名相同时{ name: name } =》{ name } 此外如果是用到了module模块化，除了将对象作为
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
haoduoyu2099的博客
11-28 5200
Vue3 组合式(setup)关于mapState和mapGetters直接使用会因为computed中没有this而报错，故而对其重新封装，给每个mapState和mapGetters返回的每个函数都绑定一个store对象
实际项目中的setup如何使用...mapGetters辅助函数调用多个方法
03-23
在实际项目中，可以使用以下方式来使用setup函数和mapGetters辅助函数调用多个方法： 1. 在Vue组件中，使用setup函数来初始化数据和方法，例如： ``` import { mapGetters } from 'vuex' export default { setup() { const { getFoo, getBar } = mapGetters(['getFoo', 'getBar']) const foo = getFoo() const bar = getBar() return { foo, bar, } }, } ``` 2. 在Vuex store中，定义getters来获取数据和方法，例如： ``` const state = { foo: 'foo', bar: 'bar', } const getters = { getFoo: state => state.foo, getBar: state => state.bar, } export default new Vuex.Store({ state, getters, }) ``` 通过以上方式，可以在Vue组件中使用setup函数和mapGetters辅助函数调用多个方法，从而方便地获取数据和方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值