[vuex3罕见错误] rawModule is undefined

最新推荐文章于 2024-03-17 18:30:25 发布
原创 最新推荐文章于 2024-03-17 18:30:25 发布 · 528 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

本文介绍了在Vue项目中，Vuex与Axios整合时遇到的循环引用错误及其解决方案。错误源于在Vuex中引入Axios而组件又试图使用Vuex，导致Vuex尚未加载完成。提出了三种解决方法：1) 使用局部注册的小仓库；2) 调整文件引入顺序，确保Vuex在组件之前加载；3) 在路由层面引入Vuex。通过这些方法确保Vuex实例在使用前已创建，避免报错。

 我想从vuex取出数据然后带到axios的请求头里,说一下为啥报错,我在aixos里引进store就报错,网上找找是因为循环引用?因为vuex里引入axios的api,真是胡扯!

 

为啥会报错,主要是axios引入store的时候vuex还没加载进来,也就是说vuex是后加载,你都没有,引进肯定报错,如何解决

有三种方法,第一种是引进小仓库

 为什么这样可以,因为小仓库是个实打实的对象,肯定存在,注意,小仓库比大仓库先执行,直接引进大仓库会报错,因为大仓库还没存在

 

第二种方法,就是让store比用到vuex的组件先引进,看图

 只要把11行移到公用组件前也就是第6行就可以了,为什么?因为公用组件会派发action,都没vuex,哪来的action?

要是我还是想照着上图这样的顺序并且在axios直接引入大仓库咋办?很简单,只需要在组件前引入store就行,就是让大仓库先比用到vuex的组件先存在

 看图,路由最先引入,可以从路由下手,在路由里面引入store

 然后我的axios里引入大仓库也不会报错

为什么,因为流程是:路由->路由引入store(也就是有了大仓库实例)->组件引入->组件派发action>vuex调用axios,此时vuex已经存在了!

如果不信,把第5行移到10行下面,绝对报错

 总结是:用到vuex的地方,必先保证vuex实例存在,

第一种方法引入的小仓库,本身就是个对象,所以可以解决,

第二种方法,让store引入比组件先,因为组件内会用到vuex,vuex里调用axios,axios再引入sote,之前都没有store生成,引入个毛,所以要让store比组件早,

第三种同理

当然,我猜的,仅供参考

vue3：Cannot read properties of undefined (reading ‘version‘) vue3项目启动编译运行提示错误，执行npm run终端错误详细排查解决方案
高级前端工程师
10-31 3434
TypeError: Cannot read properties of undefined (reading ‘version‘)，无法读取未定义的属性（读取“version”）vue3项目启动报错，执行npm run serve后报错，VUE3启动执行npm run dev出现报错，详细解决此问题，Vue3 运行报错，关于启动项目时的报错，【vue3项目】解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“。前端错误 “T
排坑记录-Uncaught TypeError: rawModule is undefined
weixin_42592879的博客
09-30 1197
排坑记录-Uncaught TypeError: rawModule is undefined 用Vue重构项目时，报了一个以前没见过的错误。 Uncaught TypeError: rawModule is undefined。 但是我的项目里并没有使用过rawModule，最后发现是我的一个文件里模块导入有问题 我的模块仓库采用了默认导出，但是导入时却使用了解析导入。导致出了bug 所以只要改一下导入方式就可以了 看来以后对模块的导入导出要更仔细一点，不然只看浏览器报的错很难看出是哪里的问题 .
Django开发中DJANGO_SETTINGS_MODULE is undefined解决方案
weixin_34345560的博客
08-04 182
今天在学习《The Django Book 2.0--中文版》第四章模版的时候，在实现代码>>>fromdjangoimporttemplate >>>t=template.Template('Mynameis{{name}}.') >>>c=template.Context({'name':...
toRaw和markRaw
bbt953的博客
07-07 833
toRaw 将一个reactive生成的响应式对象转为普通对象markRaw 标记一个对象，使其永远不会再成为响应式对象vue3中，用ref、reactive定义数据，是为了把普通数据，变成响应式数据某些时候，需要将响应式数据，再变成普通数据，此时就用toRaw setup 在整个工作过程中，只调用一次； 当需要在已经定义好的reactive数据里面在添加一个属性时，这个属性也会变成响应式的，可是如果我添加时就不想让他变成响应式的，用markRaw...
安装vuex报错
weixin_46247163的博客
06-01 421
2022年2月7日，vue3成为了默认版本，执行npm i vue 安装的直接就是vue3，vue2更新到vue的同时，vuex3vuex4版本，如果直接执行npm i vuex，那么安装的是vuex4，该版本只能在vue3中使用，硬要在vue2 中使用vuex4，报错如图。现在用的vue2，就要对应安装vuex3，执行命令行npm i vuex@3。
Vue2项目安装 vuex@3 出现版本报错解决方法
weixin_57664029的博客
03-17 1118
Vue2项目中使用 npm install vuex@3--save 安装 vuex3 出现项目版本依赖冲突。使用--legacy-peer-deps可以解决该版本冲突。
详解vuex数据传输的两种方式及this.$store undefined的解决办法
12-09
Vuex 是 Vue.js 应用的状态管理库，它允许集中管理应用中的状态，使得状态的改变变得可控。本文将详细解析 Vuex 的两种数据传输方式以及如何解决 `this.$store` 未定义的问题。 首先，我们要明确 Vue 中的模块导入...
uniApp 使用Vuex 出现 Cannot read properties of undefined (reading ‘commit‘)情况
m0_67402236的博客
03-08 3717
最近下手uni app 尝鲜 想到vue全家桶的使用，vuex是必不可少的。使用实例使用完按照文档方法使用，发现了一个问题。 在调用vue自定义的commit函数是会报错。Cannot read properties of undefined (reading ‘commit’) 说是找不到，就在该函数外部打印输出发现是存在的，函数内的 通过this.$store取值为undefined。问题就找到了。 其实解决方案就是不使用this实例的属性，上面使用import导入了一个store，这个就是定义的内
Vuex——使用namespace的store使用mapState获取state为undefined
无限迭代中......
08-06 6077
问题描述 使用namespace的store使用mapState获取state为undefined 解决方案 1....mapState中基于属性的访问 ...mapState({ searchInput: state => state.yourModuleName.searchInput, }) 2.在Vuex模块中使用namespace .......... modules: { yourModuleName: { namespaced: true, ......
uniapp TypeError: undefined is not an object (evaluating ‘modules[moduleId].call‘)
qq_27007423的博客
07-31 6977
uniapp基座从2.78升级到2.83后，app报错并出现白屏 排查下来发现是某个组件的文件夹名称有问题。。。。 把有问题的文件夹名称修改（有问题的名字：personalCenter），然后就可以运行了。。。 怀疑是文件夹名称跟项目里的东西冲突了？？？ 反正问题是解决了。。。 ...
Django开发中DJANGO_SETTINGS_MODULE is undefined错误的解决方案
weixin_33890526的博客
11-18 398
   大家在进行python web 框架 django 的学习过程中应该会碰到DJANGO_SETTINGS_MODULE is undefined 一下是几种可行的解决方法：    第一种解决方案 进入到mysite目录下，用python manage.py shell启动python解释器环境，manage.py shell命令在启动解释器之前，它告诉Django使用哪个设置文件。 D...
vue2安装vuex错误
weixin_45750034的博客
03-18 1234
报的错误 造成错误的原因可能是vuex与vue版本不匹配，vuex3适配vue2，而新版vuex4适配vue3， 所以在vue2中应安装旧版本 npm i --save vuex@3
vuex使用Cannot find module ‘./api/index.js‘
weixin_38441229的博客
08-31 443
使用vuex中出现这个问题。我的vuex的配置。 import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' import store from "./store"; import router from './router'; import "@/assets/css/base.css"; import VueRouter from 'vue-router'; import ElementUI from 'elem
关于Uncaught TypeError （Cannot read property ..undefined）的解决办法
qq_44654974的博客
07-24 3万+
一、问题描述      在Vue 的函数中使用 this.$store.commit出现Uncatch TypeError 的情况. 二、解决思路 1.进行使用检查查看报错信息，之前浏览器默认Safari浏览器，好像没有看到检查工具，出问题或者空白页面就不知道咋排错，后面才使用谷歌，使用查看进行排错。 2.分析报错信息：Uncaught TypeError;凭借英语能力猜测是不是拼写错误（哈哈哈，代码能力还比较底，不过英语好还是有助于排错，对于英语基础差
vue中二次封装时引入store里数据报错的问题 Uncaught TypeError: Cannot read properties of undefined (reading ‘getters‘)
weixin_57748417的博客
05-12 4403
vue中二次封装时引入store里数据报错的问题 Uncaught TypeError: Cannot read properties of undefined (reading 'getters')
【无标题】引入store报错——Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
m0_56151383的博客
04-12 2045
报错信息如下： 原因：必须在创建store实例之前调用Vue.use(vuex) 像上面这样改变 import 的引用顺序是解决不了问题的，使用import 引入的文件即使写在Vue.use()之后，但是解析器依然会将所有import 引入文件放在文件上面 正确做法：在store.js文件中引入vuex ...
import staorage from ‘store‘报错Unable to resolve path to module ‘store‘.
qq_43526026的博客
05-18 307
安装指令是没有问题的，=网络问题，在npm指令中指定下载库后，安装store就成成功了。store实现本地存储。没有安装store插件。
Vue is not defined错误的几种可能
热门推荐
weixin_54508954的博客
09-09 4万+
Vue is not defined错误的几种可能
【vue3】使用toRaw，方法获取变量的原始值，便于调试
有一棵树的博客
10-27 4029
【vue3】使用toRaw，方法获取变量的原始值，便于调试
http.ServerResponse is undefined 错误 分析
最新发布
05-27
### 关于 `http.ServerResponse is undefined` 错误的原因分析 在 Node.js 中，`http.ServerResponse` 是内置模块的一部分，通常用于表示 HTTP 响应对象。如果遇到错误提示 `http.ServerResponse is undefined`，这通常是由于以下几个原因之一引起的： #### 1. **版本兼容性问题** Node.js 不同版本之间可能存在 API 变更的情况。某些旧版代码可能依赖特定版本中的实现细节，在升级到较新版本后可能导致此类错误[^2]。 #### 2. **未正确加载 http 模块** 如果开发者尝试直接访问 `http.ServerResponse` 而没有通过标准方式引入 `http` 模块，则可能会引发此问题。例如，应该使用如下方式引入模块并操作其属性： ```javascript const http = require('node:http'); console.log(http.ServerResponse); ``` #### 3. **ESM 和 CommonJS 的混用问题** 随着 ES Module (ESM) 成为官方支持的标准之一，部分开发人员可能在同一项目中混合使用两种模块系统。这种情况下需要注意，默认导出的内容形式不同。对于 ESM 需要显式解构赋值才能获取子项，如下面例子所示： ```javascript // 使用 ESM 导入时需注意结构化绑定语法 import { createServer, ServerResponse } from 'node:http'; if (!ServerResponse){ throw new Error("Failed to load ServerResponse"); } ``` #### 解决方案建议 针对以上提到的各种可能性，可以采取以下措施来排查和解决问题： - 确认当前使用的 Node.js 版本号，并查阅对应文档了解是否有已知变更影响到了 `http.ServerResponse` 定义； - 检查源码里有关 `require/import` 的语句是否遵循最佳实践指南； - 如果怀疑是缓存引起的问题，可清除 npm 缓存或者重启 IDE/编辑器后再试一次编译运行流程； 最后附上一段简单的测试脚本来验证环境配置无误与否： ```javascript const http = require('node:http'); if(typeof http.ServerResponse !== 'undefined'){ console.log('http.ServerResponse exists.'); }else{ console.error('Error: http.ServerResponse does not exist!'); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值