【记录】VUEX不同modules内部变量/方法名字存在重复,如何引入对应modules方法

已于 2022-07-27 16:35:20 修改
阅读量1.2k 收藏 4
点赞数
文章标签： javascript 前端 开发语言
于 2022-07-27 16:31:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouch_xtf/article/details/126017119
版权

VUEX不同modules内部变量/方法名字存在重复,如何引入

不同modlues中存在命名重复：

例如：如下图 两个modules都存在 devId 和 set_devId
在这里插入图片描述
在这里插入图片描述

原因分析：

原因…原因就是项目叠加的代码太多辣总粘来粘去
但是没有 报错切里面的变量和方法均可正常使用,避免以后重复的越来越多,先下手为强处理一下.

解决方案：

提示：namespaced命名空间 VUEX提供的属性

在modules加入改属性后 ,此modules会被内部处理,不深究,我只想解决我的问题
在这里插入图片描述
加入此属性后,两种方法引用使用

  1. 直接使用
    正常使用的时候在方法钱加上 modeules名字/
    我的的modules是zhengjiang_daping 按如下图使用方法
    在这里插入图片描述
    2通过VUEX的map方法

先引入VUEX map 方法 具体看你用哪个 mapState ,mapActions,mapMutations
之后map你需要的方法 也是加上 modules名字就可以
在这里插入图片描述
之后直接使用
在这里插入图片描述

溜了溜了~~~~

白云苍狗い
关注
千万注意解构赋值强调顺序而不是包含，还有const常量解构赋值时出现重名的解决方法
qq_34471916的博客
02-03 339
const player = { nickname: '感情的戏∫我没演技∆', master: '东海龙王', skill: [{ skillName: '龙吟', mp: '100', time: 6000 },{ skillName: '龙卷雨击', mp: '400', time: 3000 },{ skillName: '龙腾', mp: '90...
vuex3源码注释系列 /src/store.js
qq_36723759的博客
03-16 916
import applyMixin from "./mixin"; import devtoolPlugin from "./plugins/devtool"; import ModuleCollection from "./module/module-collection"; import { forEachValue, isObject, isPromise, assert, partial } from "./util"; let Vue; // bind on install /*** * V
vue.js 2.x教程
学习笔记
02-12 4590
教程 基础 安装 兼容性 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 更新日志 最新稳定版本：2.5.13 每个版本的更新日志见 GitHub。 Vue Devtools 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它...
挖坑指南：在vuex的多个module中的getters里存在相同的方法名，使用mapGetters会报错？
weixin_39015132的博客
11-17 8001
原文链接 前言 其实这个标题就是我们今天要谈论的话题。 开始 在vuex中有多个module是很正常滴，为了方便管理呢，我们有些module中使用了相同的名称。那么，在使用时，就会报错啦~ 实践 其实在vuex的官网，已经为我们描述过啦~ vuex:https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A...
报错：[vuex] duplicate getter key: list ——＞不同的模块有相同的名字，产生了冲突
qq_56715703的博客
03-04 698
解决：在每个有list命名的模块暴露中加入namespaced:true （启用命名空间）其默认值是false。之后在引入子模块的index.js中使用modules时，其内就是命名空间的名称。所以需要在mapGetters的属性值中加入此命名空间。问题：不同的模块有相同的名字list，产生了冲突。翻译是：重复的 getter 键: list。引入子模块 index.js。在User.vue中使用时。
vuex在模块中getters和actions命名重复会冲突，用命名空间即可解决
qq_24882601的博客
05-29 5359
最近在做项目的时候，用了vuex的模块化模式，一开始没有什么问题 ，但是写到后面发现就出现问题了，打开控制台，发现这样的错误；百度之后发现是模块里面的getters方法的名字和根store里面的getters方法名字重复了。所以会报这样的错误，不仅仅是getters方法名字重复会报错，如果actions的名字也重复的话，那么这个action会执行多次，这就不是我们想要的效果了 ...
vue组件引入外部js同时获取变量，解决重复引入
嘿喵财运旺旺
11-06 1274
vue组件引入外部js同时获取变量 引入文件支持加载成功回调，支持通过字符串变量名获取js文件的变量 /** * 引入js文件 并且获取变量 * @param src js路径 * @param variableName 需要获取的变量名 * @param callback */ export const importJs = (src, variableName = '', callback = '') => { if (!isInclude(src)) { // 避免重复引入
vue3知识点7 vue3.0+cli4.5 vuex vuex安装配置 state mutations actions modules命名空间 getters
yangyangdt的博客
01-09 824
本文详解了vue3.0+vue-cli4.5的vuex中各种属性的用法。state mulations actions modules getters等。
Vuex略解之Modules模块化以及mapGetters mapActions和mapState
lengbling的博客
12-10 4959
因为在大多数的项目中，我们对于全局状态的管理并不仅仅一种情况的需求，有时有多方面的需求，比如写一个商城项目，你所用到的全局state可能是关于购物车这一块儿的也有可能是关于商品价格这一块儿的；像这样的情况我们就要考虑使用vuex中的modules模块化了，具体怎么使用modules呢？咱们继续一步一步的走： 首先，在store文件夹下面新建一个modules文件夹，然后在modules文件里...
Vuex：state，mutations，actions，getters，modules/网络模块封装axios
Rashu99's blog
03-14 372
Action-State-View vue init webpack vuextest npm install vuex --save 创建store 文件夹 以及index.js 因为在Vue实例下挂载了store 所以有$store属性 可以使用 $store.state.counter
vue vuex的概念，以及多种使用方法（应用场景）（浓缩版）
PrimaryColor
10-24 1007
**//概念部分:=========================>** 一、vuex是什么？ vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。 二、为什么需要vuex？ 当多个组件依赖于同一个状态时，由于多层组件之间的嵌套使得传参数的方法变得更加复杂，另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝，会使得该模式变得脆弱，从而无法维护代码。 三、什么时候什
Vuex 模块化与项目实例 (2.0)
weixin_30299539的博客
02-15 215
Vuex 强调使用单一状态树，即在一个项目里只有一个 store，这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护，所以就需要对状态树进行模块化的拆分。 首先贴出一个逻辑比较复杂的H5项目：源码& DEMO 该项目主要包括 banner、feeds、profile 三个部分。其中 feeds 模块最复...
vue 中 import引入相同的方法名称解决方法
最新发布
前端打工人的博客
06-28 2417
当引入了2个不同的文件，方法名称list都是一样的，就会出现报错。如果之前文件用的地方比较多，直接改名称的话，可能会漏掉，会引起不必要的麻烦，那如何解决呢。
vue导入js的方法怎么解决同名问题
yangzongzhuan的专栏
09-29 4809
例如： import { list } from ... import { list } from ... 解决： import {list as userList} from ... import {list as roleList} from ...
vue中多个组件之间数据同步vuex
qq_40097298的博客
12-20 2246
在一些项目中有很多数据状态之间要实现数据共享状态共享，例如购物车的数据、用户的登录状态等。最经典的比如像购物车这种在项目中多个位置的引用时就会变得很麻烦，例如项目中使用了三个购物车的组件，那么当其中一个组件的值发生改变时，就要通过自身告诉父组件我的值发生改变了，然后父组件在通知其他两个购物车组件值发生改变了，需要进行同步，这样就会变得很麻烦。而vuex就可以帮助我们解决这个繁琐的问题。 页面...
vuex使用modules namespaced 后，模块名不同，函数名相同时候在组件中分发Action
weixin_30918633的博客
03-20 1660
你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用mapActions辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）： import { mapActions } from 'vuex' export default { // ... methods...
vuex实现购物车功能
10-15
- mutations中定义如`addCart`方法，用于添加商品到购物车，如果商品已存在则不重复添加，而是增加数量。 - 使用actions处理可能的异步逻辑，比如从服务器获取商品信息或更新购物车数据。 4. **具体实现步骤**： ...
Vuex
小海的博客
10-25 132
vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 vuex解决了什么问题 如何确保在不同组件中的数据保持同步 如何确保每次对于数据的修改都是可追踪的 举个例子 一个户外商店有两名员工，张三和李四，在一天的早上，他们分别对帐篷的数量做了一次盘点，发现一共有三个帐篷可供出售，俩个人在商店里度过了一天，张三卖出去俩个，他以为库存里还有一个，李四卖出去一个，他以为库存里还有俩个，而
Vuex（篇5-2）——modules中mutations
YanHSama的博客
07-26 1757
组件中调用vuex模块中的mutations（无参数） mutations: { add (state) { state.count++; } } 组件中调用模块/全局中的mutations 方式1 <button @click="addA">点击模块A</button> <br> <button @click="addB">点击模块B</button&
vue vuex（数据共享）
W2001r的博客
05-12 418
一、概念   应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 二、vuex工作原理图：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白云苍狗い

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值