vue3+ts 项目遇到的问题和bug

news2024/11/26 20:20:21

1.router中使用pinia报错

在这里插入图片描述

pinia.mjs:1709 Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.
    at useStore (pinia.mjs:1709:19)
    at index.ts:6:15

分析原因:因为在mian.js中,注册router总比pinia先,所以不能使用到store/index.js文件中createPinia方法

解决方法:把store实例化放到路由守卫函数里面

import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

// ❌ 由于引入顺序的问题,这将失败
const store = useStore()

router.beforeEach((to, from, next) => {
  // 我们想要在这里使用 store
  if (store.isLoggedIn) next()
  else next('/login')
})

router.beforeEach((to) => {
  // ✅ 这样做是可行的,因为路由器是在其被安装之后开始导航的,
  // 而此时 Pinia 也已经被安装。
  const store = useStore()

  if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

参考:
添加链接描述
pinia

2.路由报错

在这里插入图片描述

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/"
warn @ vue-router.mjs:35
显示另外 1 个框架
收起

参考:
https://blog.csdn.net/weixin_45952652/article/details/131192829

https://blog.csdn.net/m0_64344940/article/details/130710796

3.vue 样式穿透

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.

在这里插入图片描述
把::v-deep 替换为 :deep()
在这里插入图片描述

参考:
https://blog.csdn.net/weixin_43405300/article/details/132099608

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

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

相关文章

[科研图像处理]用matlab平替image-j,有点麻烦,但很灵活!

做材料与生物相关方向的同学应该对image-j并不陌生&#xff0c;前几天有个师兄拜托我用image-j分析一些图片&#xff0c;但使用过后发现我由于不了解image-j的工作流程而对结果并不确信&#xff0c;而且image-j的功能无法拓展&#xff0c;对有些图片的处理效果并不好&#xff0…

【网络协议】聊聊HTTPDNS如何工作的

传统 DNS 存在哪些问题&#xff1f; 域名缓存问题 我们知道CND会进行域名解析&#xff0c;但是由于本地会进行缓存对应的域名-ip地址&#xff0c;所以可能出现过期数据的情况。 域名转发问题 出口 NAT 问题 域名更新问题 解析延迟问题 因为在解析DNS的时候&#xff0c;需要进行…

【C语言】函数的系统化精讲(二)

&#x1f308;write in front :&#x1f50d;个人主页 &#xff1a; 啊森要自信的主页 &#x1f308;作者寄语 &#x1f308;&#xff1a; 小菜鸟的力量不在于它的体型&#xff0c;而在于它内心的勇气和无限的潜能&#xff0c;只要你有决心&#xff0c;就没有什么事情是不可能的…

vue3错误排查-POST请求的body参数 传参方式form-data和json

问题&#xff1a;vue3实现登录功能&#xff0c;登录成功后 跳转到登陆后的界面 一秒后 闪退回登录页 对应的输出结果也一闪而过&#xff0c;反复复查了代码&#xff0c;没问题。 自测&#xff1a;进行断点输出调试。强行跳转到登陆后的界面&#xff0c;查看输出的结果。 没有报…

安全操作(安卓推流)程序

★ 安全操作项目 项目描述&#xff1a;安全操作项目旨在提高医疗设备的安全性&#xff0c;特别是在医生离开操作屏幕时&#xff0c;以减少非授权人员的误操作风险。为实现这一目标&#xff0c;我们采用多层次的保护措施&#xff0c;包括人脸识别、姿势检测以及二维码识别等技术…

Linux 实现原理 — NUMA 多核架构中的多线程调度开销与性能优化

前言 NOTE&#xff1a;本文中所指 “线程” 均为可执行调度单元 Kernel Thread。 NUMA 体系结构 NUMA&#xff08;Non-Uniform Memory Access&#xff0c;非一致性存储器访问&#xff09;的设计理念是将 CPU 和 Main Memory 进行分区自治&#xff08;Local NUMA node&#x…

1070 结绳

一.问题&#xff1a; 给定一段一段的绳子&#xff0c;你需要把它们串成一条绳。每次串连的时候&#xff0c;是把两段绳子对折&#xff0c;再如下图所示套接在一起。这样得到的绳子又被当成是另一段绳子&#xff0c;可以再次对折去跟另一段绳子串连。每次串连后&#xff0c;原来…

【网络安全 --- web服务器解析漏洞】IIS,Apache,Nginx中间件常见解析漏洞

一&#xff0c;工具及环境准备 以下都是超详细保姆级安装教程&#xff0c;缺什么安装什么即可&#xff08;提供镜像工具资源&#xff09; 1-1 VMware 16.0 安装 【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;-CSDN博客文章浏览阅读20…

Android Datastore 动态创建与源码解析

涉及到的知识点 1、协程原理---->很好的博客介绍&#xff0c;一个小故事讲明白进程、线程、Kotlin 协程到底啥关系&#xff1f; 2、Channel知识点---->Android—kotlin-Channel超详细讲解 3、Coroutines : CompletableDeferred and structured concurrency 封装的DataS…

动态规划-丑数

** 描述 把只包含质因子2、3和5的数称作丑数&#xff08;Ugly Number&#xff09;。例如6、8都是丑数&#xff0c;但14不是&#xff0c;因为它包含质因子7。 习惯上我们把1当做是第一个丑数。求按从小到大的顺序的第 n个丑数。 数据范围&#xff1a; 0≤n≤2000 要求&#x…

Mysql数据库 9.SQL语言 查询语句 连接查询、子查询

连接查询 通过查询多张表&#xff0c;用连接查询进行多表联合查询 关键字&#xff1a;inner join 内连接 left join 左连接 right join 右连接 数据准备 创建新的数据库&#xff1a;create database 数据库名; create database db_test2; 使用数据库&#xff1a;use 数据…

企业如何搭建智能客服系统?

在数字化时代&#xff0c;企业面临着客户需求多样化、市场竞争日益激烈等多重挑战。为了更好地满足客户的需求、提供高效的服务&#xff0c;越来越多的企业开始搭建智能客服系统。智能客服系统结合了人工智能和自然语言处理技术&#xff0c;可以实现自动回复、智能推荐以及数据…

Linux内核移植之主频设置

一. Linux内核移植 正点原子 ALPHA开发板已经添加到 Linux内核里面去了&#xff0c;前面文章关于如何添加已经掌握。但是&#xff0c;还有一些驱动的问题需要修改。 正点原子 I.MX6U-ALPHA 开发板所使用的 I.MX6ULL 芯片主频都是 792MHz 的&#xff0c;也就是NXP 官方宣…

MySQL的event的使用方法

MySQL的event的使用方法 一、事件定时策略 1、查看event事件开启状态 SHOW VARIABLES LIKE event_scheduler;如图&#xff0c;Value值 ON&#xff1a;打开&#xff0c;OFF&#xff1a;关闭。 2、设置event事件打开 SET GLOBAL event_scheduler ON;如果MySQL重启了&#x…

Python模块导入出现ModuleNotFoundError: No module named ‘***’解决方法

概述 几年没弄python了&#xff0c;全部还会给老师&#xff0c;今天弄了个demo&#xff0c;老是报错&#xff0c;在此记录下&#xff0c;方便后续查阅。 环境&#xff1a;Windows10 开发IDEA&#xff1a;PyCharm 2023.1.3 1、报错如下所示 2、解决方法&#xff1a;安装execjs…

AJAX-解决回调函数地狱问题

一、同步代码和异步代码 1.同步代码 浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作&#xff0c;在上一行完成之后才会执行下一行。这也使得它成为一个同步程序。 总结来说&#xff1a;逐行执行&#xff0c;需原地等待结果后&#xff0…

[python 刷题] 437 Path Sum III

[python 刷题] 437 Path Sum III 之前有写过 Path Sum I & II, leetcode 112 & 113&#xff0c;虽然使用 JS 写的&#xff0c;不过 python 的实现也更新了一下 题目如下&#xff1a; Given the root of a binary tree and an integer targetSum, return the number o…

解释一下Node.js中的事件循环(event loop)

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

目前安卓、鸿蒙、澎湃的关系

1、了解AOSP是什么 AOSP全名为Android Open-Source Project&#xff0c;中文为安卓开源项目&#xff0c;开源即开放源代码。Android是一个基于Linux&#xff0c;由Google主导的开源系统。 2、AOSP谁的贡献最大&#xff1f; 3、华为的鸿蒙、小米的澎湃是套壳安卓吗&#xff1…

docker基础用法

docker基础用法 什么是docker docker中的容器&#xff1a; lxc --> libcontainer --> runC OCI Open Container-initiative 由Linux基金会主导于2015年6月创立旨在围绕容器格式和运行时制定一个开放的工业化标准contains two specifications the Runtime Specificat…