uncaught referenceError:cannot access ‘xxxStore‘ before initialization

目录

一、问题

二、解决方法

三、总结


tiips:如嫌繁琐,直接移步总结即可!

一、问题

1.写代码的时候引入store,居然报错:store没有初始化就被使用了,连页面都打不开了。

  1)错误如下,详细错误如下图1-1所示:

runtime~app.js:39 Uncaught ReferenceError: Cannot access 'userStore' before initializationat useUserStoreWithOut (user.js?0f9a:417:1)at eval (CascadeSelect.vue?a9d8:71:1)at Module.../../common/temp/node_modules/.pnpm/vue-loader@15.10.1_0ebd5903fa43d73a8adee356405c128d/node_modules/vue-loader/lib/index.js??vue-loader-options!../../packages/components/MenuHeader/CascadeSelect.vue?vue&type=script&lang=js& (app.js:4919:1)at __webpack_require__ (runtime~app.js:36:33)at fn (runtime~app.js:339:21)at eval (CascadeSelect.vue?vue&type=script&lang=js&:5:239)at Module.../../packages/components/MenuHeader/CascadeSelect.vue?vue&type=script&lang=js& (app.js:6987:1)at __webpack_require__ (runtime~app.js:36:33)at fn (runtime~app.js:339:21)at eval (CascadeSelect.vue:6:101)
图 1-1

  2)代码如下

import { useUserStoreWithOut } from '@/store/modules';
import { websocketStore } from '@/store/modules/websocket';

二、解决方法

1.这个报错可真是奇怪呀:第二行表明错误是在 声明userStore的文件 user.js中,不就是在声明userStore吗?怎么就报:没有初始化就使用了?第三行表明:错误在cascadeSelect.vue中被发现——推测可能是userStore初始化出问题了,所以在cascadeSelect.vue中被使用时找不到 userStore,所以报错了。

2.可问题是 这样的引入其他页面也有呀,为什么就这个页面会报错呢?

3.上面两行代码一行一行注释:发现无论保留哪一行都会报这个错误@—@;把store引入 都注释后,页面就可以进去了,但是我确实需要用这两个store呀。。。。。。

4.只能根据报错去 user.js中排查了。user里面  找到所有和 store有关的代码,注释后上面的代码竟然不报错了;页面可以正常进入了

5.user.js里面的代码说明:userStore需要依赖于 websocketStore,所以尝试复原 user.js,上面的store引入调整顺序为下面这样,竟然不报错了!!!

import { websocketStore } from '@/store/modules/websocket';
import { useUserStoreWithOut } from '@/store/modules';

6.其他页面没有调换引入顺序前,也没有报错呀。为什么就这个页面里面需要严格遵守store的依赖关系呢?

7原来这个页面直接被放在全局app.vue中,所以store可能还没有全部加载完,必须严格遵守依赖关系;而其他页面使用store前,所有store都加载完了,所以不报错。

三、总结

1.报错:uncaught referenceError:cannot access ‘xxxStore‘ before initialization时,可以先试着交换一下  多个 store引入的顺序,问题或许能够迎刃而解。

2.当然先搞清楚  各个store的依赖关系就更好了,直接根据依赖关系的先后顺序,分别引入store即可。

3.出现上述报错的原因:一般是因为全局页面引入store,并且不同的store存在依赖关系,因为并不是所有的store都加载好了,所以需要严格按照引入的所有store的依赖关系引入!

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/632417.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

瑞_Java开发手册_(六)工程结构

文章目录 工程结构的意义(一) 应用分层(二) 二方库依赖(三) 服务器 🙊前言:本文章为瑞_系列专栏之《Java开发手册》的工程结构篇,主要介绍应用分层、二方库依赖、服务器。由于博主是从阿里的《Java开发手册》学习到Java的编程规约&#xff0c…

[LitCTF 2023] Web类题目分享

[LitCTF 2023] Web类题目做法及思路解析(个人分享) 题目平台地址:NSSCTF | 在线CTF平台 一、[LitCTF 2023]我Flag呢? 奇怪,放哪里了,怎么看不见呢?(初级难度) 1.访问…

基于Harris角点的多视角图像全景拼接算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 Harris角点检测 4.2 图像配准 4.3 图像变换和拼接 4.4 全景图像优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 function [ImageB…

C++--默认参数

一.默认参数🍗 C中允许函数提供默认参数,也就是允许在函数的声明或定义时给⼀个或多个参数指定默认值。在调 ⽤具有默认参数的函数时,如果没有提供实际参数,C将⾃动把默认参数作为相应参数的值。 二.使用规则🍗 1.如果…

Spring Boot 配置文件和日志

目录 配置文件格式 properties配置文件说明 1.properties基本语法 2.读取配置文件 3.properties缺点 yml配置文件说明 1.yml基本语法 2.配置不同数据类型 3.字符串特殊情况 4.配置对象 properties和yml对比 日志 日志的使用 日志级别 日志持久化 Lombok Lombo…

【MIdjourney】一些材质相关的关键词

1.多维剪纸(Multidimensional papercut) "Multidimensional papercut"(多维剪纸)是一种剪纸艺术形式,通过多层次的剪纸技巧和设计来创造出立体感和深度感。这种艺术形式通常涉及在不同的纸层上剪裁不同的图案,并将它们…

蓝桥杯真题(Python)每日练Day1

说明:在CSP认证的基础上(可以看看本人CSP打卡系列的博客)备赛2024蓝桥杯(Python),本人专业:大数据与数据科学 因此对python要求熟练掌握,通过练习蓝桥杯既能熟悉语法又能锻炼算法和思…

Vue表单输入密码实现密码格式和强度验证提示框-demo

实现效果 实现过程 校验 //密码格式校验 const validateUppercase (rule, value, callback) > {if (!/[A-Z]/.test(value)) {callback(new Error(密码必须包含至少一个大写字母));} else {callback();} }; const validateNumber (rule, value, callback) > {if (!/\d…

【论文简介】个性化真实人像生成方法(2024.01.15发布,即将开源)

零样本身份保留生成方法:声称效果好于PhotoMaker(即将开源) 2401.InstantID: Zero-shot Identity-Preserving Generation in Seconds : 项目主页:https://instantid.github.io/ 一、简介 本文的主要内容是介绍了一种…

【驱动】I2C驱动分析(二)-驱动框架

I2C驱动框架简介 I2C 驱动属于总线-设备-驱动模型的,与I2C总线设备驱动模型相比,大体框架是一样,系统的整体框架如下所示。 最上层是应用层,在应用层用户可以直接用open read write对设备进行操作,往下是设备驱动层&a…

Jenkins的环境部署,(打包、发布、部署、自动化测试)

一、Tomcat环境安装 1.安装JDK(Java环境) JDK下载地址:Java Downloads | Oracle 安装好后在系统环境变量里配置环境变量: ①添加JAVA_HOME 变量名:JAVA_HOME变量值:C:\Program Files\Java\jdk1.8.0_18…

CSS笔记II

CSS第二天笔记 复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器 三大特性继承性层叠性优先级优先级-叠加计算规则 Emmet写法 背景属性背景图平铺方式位置缩放固定复合属性 显示模式转换显示模式 复合选择器 定义:由两个或多个基础选择器,通…

LeetCode19:删除链表的倒数第N个结点

力扣题目链接 思路:由于本题有可能删除头结点,为保证删除头结点和其他结点的操作一致,因此首先创建一个虚拟头结点dummy。 其次,本题需要删除倒数第N个结点,由于单链表只有next指针,因此需要找到倒数第N1…

力扣精选算法100题——找到字符串中所有字母异位词(滑动窗口专题)

本题链接👉找到字符串中所有字母异位词 第一步:了解题意 给定2个字符串s和p,找到s中所有p的变位词的字串,就是p是"abc",在s串中找到与p串相等的字串,可以位置不同,但是字母必须相同,比…

橘子学K8S04之重新认识Docker容器

我们之前分别从 Linux Namespace 的隔离能力、Linux Cgroups 的限制能力,以及基于 rootfs 的文件系统三个角度来理解了一下关于容器的核心实现原理。 这里一定注意说的是Linux环境,因为Linux Docker (namespaces cgroups rootfs) ! Docker on Mac (bas…

Mybatis面试题(一)

MyBatis 面试题 1、什么是 Mybatis? 1、Mybatis 是一个半 ORM(对象关系映射)框架,它内部封装了 JDBC,开发时只需要关注 SQL 语句本身,不需要花费精力去处理加载驱动、创建连接、创建statement 等繁杂的过程…

在PyCharm中创建Flask项目

在 PyCharm 中创建 Flask 项目的步骤如下: 打开 PyCharm,并选择 "Create New Project"(新建项目)。在弹出的窗口中,选择左侧的 "Python" 选项,然后选择右侧的 "Flask" 项目…

【开发实践】前端jQuery+gif图片实现载入界面

一、需求分析 载入界面(Loading screen)是指在计算机程序或电子游戏中,当用户启动应用程序或切换到新的场景时,显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息,以及提供一种视觉上的反…

(C语言)冒泡排序

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现buble_sort函数&#xff1b; void buble_sort(int arr[], int sz) {//初始化变量值&#xff1b;int i 0;//嵌套循环冒泡排序&#xff1b;//外层循环&…

基于SSM的在线宠物商城设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue、HTML 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是…