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

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) => {// 我们想要在这里使用 storeif (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

4.defineProps is a compiler macro and no longer needs to be imported

[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

在这里插入图片描述
[@vue/compiler sfc]defineEmits是一个编译器宏,不再需要导入。

[@vue/compiler sfc]`defineProps’是一个编译器宏,不再需要导入。

文件里把这两个引用去掉即可

import { defineEmits, defineProps, computed } from 'vue'
改为
import {  computed } from 'vue'

5.前端什么时候使用formdata

学习项目时发现封装了一个上传hook:
用于上传表单数据,

import axios from "axios";function upload(path: string, userForm: any) {const params = new FormData()for (const i in userForm) {params.append(i, userForm[i])}// console.log(params)return axios.post(path, params, {headers: {"Content-Type": "multipart/form-data"}}).then(res => res.data)
}export default upload

那么new FormData()的作用是什么,为什么要用?

new FormData() 是 JavaScript 中的一个构造函数,用于创建新的 FormData 对象。FormData 对象用于存储键值对,并且可以模拟表单数据(表单元素和它们的值)的序列化。

需要发送二进制数据或大文件时,使用FormData非常有用

“Content-Type” 是一个 HTTP 请求头,它告诉服务器发送过来的数据是什么类型。在这种情况下,“multipart/form-data” 是一种编码类型,用于发送表单数据。这种编码类型常常用于发送包含文件上传的表单数据,因为它可以处理二进制数据和非文本数据。

常见的 Content-Type 头字段有以下几种:
application/json:用于表示 JSON 格式的数据。
application/xml:用于表示 XML 格式的数据。
text/plain:用于表示纯文本数据。
text/css:用于表示 CSS 样式表。
image/png、image/jpeg、image/gif 等:用于表示图片数据。
audio/mpeg、audio/mp3、audio/wav 等:用于表示音频数据。
video/mp4、video/webm、video/ogg 等:用于表示视频数据。
multipart/form-data:用于表示 Multipart/form-data 格式的数据,常用于文件上传。
application/x-www-form-urlencoded:用于表示 URL 编码的表单数据。

6.路由守卫中设置网页title

在这里插入图片描述
在路由中设置meta增加title

const routes = [  {  path: '/',  component: Home,  meta: { title: '首页' }  },  {  path: '/about',  component: About,  meta: { title: '关于我们' }  }  
]

在路由守卫中设置标题

import Vue from 'vue';  
import Router from 'vue-router';  Vue.use(Router);  const router = new Router({  routes,  // 在这里添加路由守卫来设置标题  beforeEach(to, from, next) {  document.title = to.meta.title; // 设置页面标题为当前路由的 meta.title  next(); // 一定要调用 next() 方法,否则路由不会继续导航  }  
});

Vue Router中meta属性如下:

属性名作用
title设置页面的标题,用于显示在浏览器标签页上
description为路由提供一个简短的描述,可用于SEO优化和搜索引擎结果描述
params定义路由参数,用于在路由组件中获取和使用这些参数
redirect重定向到另一个路由,当用户访问当前路由时,直接跳转到指定的路由
props控制路由组件的props是否可以被子路由继承
alias设置当前路由的别名,方便进行路由导航和URL管理
children定义当前路由的子路由,用于组织嵌套路由
index定义路由的初始组件,当访问该路由时,首先显示该组件
controller自定义路由的控制器,用于处理路由导航和渲染组件的逻辑
meta自定义元信息,可以在路由守卫、导航钩子等地方获取并使用这些信息

7.

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

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

相关文章

python爬虫怎么翻页 ?

首先&#xff0c;你需要安装相关的库。在你的命令行窗口中&#xff0c;输入以下命令来安装所需的库&#xff1a; pip install requests beautifulsoup4然后&#xff0c;你可以使用以下代码来爬取网页内容并翻页&#xff1a; package mainimport ("fmt""net/htt…

【沐风老师】3dMax快速平铺纹理插件QuickTiles教程

QuickTiles是3ds max的一个插件&#xff0c;允许您将常规瓷砖纹理转换为交互式纹理&#xff0c;就在mat.editor中。 换言之&#xff0c;您可以根据需要对任何纹理进行修改和重新创建&#xff1a;更改布局、瓷砖大小、格式、颜色、接缝、体积、随机化形状或纹理等等。 这种方法大…

打造高效的客服体系,就在于这个“专属链接”

想要追踪特定数据&#xff0c;但是得在数据库中大海捞针&#xff1f; 想要知道某个推广的效果&#xff0c;但是无法追踪&#xff1f; 想要获得个性化的报告&#xff0c;但是数据不够精准&#xff1f; 面对这些情况&#xff0c;只需要靠一条“专属链接”就能一一击破&#xff…

qt多线程例子,不断输出数字

dialog.h #include "dialog.h" #include "ui_dialog.h"Dialog::Dialog(QWidget *parent) :QDialog(parent),ui(new Ui::Dialog) {ui->setupUi(this); }Dialog::~Dialog() {delete ui; }// 启动线程按钮 void Dialog::on_startButton_clicked() {//conn…

C#解析XML并反序列化为Model的方法

虽然现在json大行其道&#xff0c;但是xml格式依旧占据着广阔的编程世界&#xff0c;不管光伏锂电激光卫星汽车等等工业领域&#xff0c;基本上都是以xml为主&#xff0c;广大的.NET开发人员有很多被xml折磨的都要转java了&#xff0c;这篇小作文就来玩一种迅速完成xml到model的…

Hello Vue!

目录 前言 hello vue 为什么要new Vue(),而不能直接调用Vue()? Vue构造函数中的形参options template配置项 $mount()方法 前言 从此篇博客开始&#xff0c;将开启vue的学习&#xff0c;查缺补漏。 只要学计算机语言&#xff0c;那么hello xxx那一定是入门第一行代码了…

【深度学习】pytorch——Autograd

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 深度学习专栏链接&#xff1a; http://t.csdnimg.cn/dscW7 pytorch——Autograd Autograd简介requires_grad计算图没有梯度追踪的张量ensor.data 、tensor.detach()非叶子节点的梯度计算图特点总结 利用Autograd实…

vmware虚拟机设置静态ip之后无法联网

今天在vmware虚拟机设置静态ip&#xff0c;设置静态ip之后无法联网&#xff08;ping&#xff09;&#xff0c;并且SecureCRT无法连接上虚拟机。 网卡参数配置没有问题&#xff0c;可是却发联网&#xff0c;ping网站也不通 显示未知的名称和服务&#xff0c;开始以为网管和DNS是…

注册虾皮买家号需要哪些资料?

注册虾皮买家号其实是很简单的&#xff0c;使用相应国家的手机号及对应的环境就可以注册了的&#xff0c;如果想要账号更方便使用&#xff0c;也可以绑定邮箱进行认证。 而如果想要使用shopee买家通系统进行自动化的注册&#xff0c;那么对于资料就有一定的要求了。 1、手机号…

【算法 | 模拟No.3】leetcode 38. 外观数列

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【Leetcode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

微服务-grpc

微服务 一、微服务&#xff08;microservices&#xff09; 近几年,微服这个词闯入了我们的视线范围。在百度与谷歌中随便搜一搜也有几千万条的结果。那么&#xff0c;什么是微服务 呢&#xff1f;微服务的概念是怎么产生的呢&#xff1f; 我们就来了解一下Go语言与微服务的千丝…

RDS for Mysql 到云数据库GaussDB

前言 该实验旨在指导用户使用DRS将RDS MySQL上的数据迁移到 GaussDB中。 本实验涉及数据复制服务DRS&#xff08;Data Replication Service&#xff09;、关系型数据库服务RDS&#xff08;Relational Database Service&#xff09;、GaussDB、数据管理服务DAS&#xff08;Data…

从研发域到量产域的自动驾驶工具链探索与实践

导读 本文整理自 2023 年 9 月 5 日百度云智大会 - 智能汽车分论坛&#xff0c;百度智能云自动驾驶云研发高级经理徐鹏的主题演讲《从研发域到量产域的自动驾驶工具链探索与实践》。 全文中部段落附有演讲中 2 个产品演示视频的完整版&#xff0c;精彩不容错过。 (视频观看&…

Redis7--基础篇2(Redis的十大数据类型及常用命令)

1. Redis的十大数据类型及常用命令 Redis是key-value键值对类型的数据库&#xff0c;我们所说的数据类型指的是value的数据类型&#xff0c;key的数据类型都是字符串。 1.1 字符串&#xff08;String&#xff09; string是redis最基本的类型&#xff0c;一个key对应一个val…

船舶数据采集与数据模块解决方案

标准化信息处理单元原理样机初步方案&#xff1a; 1&#xff09;系统组成 标准化信息处理单元原理样机包含硬件部分和软件部分。 硬件部分包括集成电路板、电源模块、主控模块、采集模块、信息处理模块、通讯模块、I/O模块等。 软件部分包括协议统一标准化模块、设备互联互…

Scala爬虫如何实时采集天气数据?

这是一个基本的Scala爬虫程序&#xff0c;使用了Scala的http library来发送HTTP请求和获取网页内容。在爬取天气预报信息时&#xff0c;我们首先需要创建一个代理对象proxy&#xff0c;并将其用于发送HTTP请求。然后&#xff0c;我们使用http库的GET方法获取网页内容&#xff0…

【高分快刊】Elsevier旗下,中科院2区SCI,2个月19天录用!

计算机类 • 高分快刊解读 今天小编带来Elsevier旗下计算机领域好刊的解读&#xff0c;如有相关领域作者有意向投稿&#xff0c;可作为重点关注&#xff01;后文有真实发表案例&#xff0c;供您投稿参考~ 01 期刊简介 ☑️出版社&#xff1a;Elsevier ☑️影响因子&#xf…

能源监测管理系统有哪些作用与效果?

随着全球能源的不断增加&#xff0c;能源的有限性与环境问题日益严重&#xff0c;用能管理企业需要一种高效的方法来管理能源与利用能源&#xff0c;因此能源监测管理系统成为了一种不可或缺的工具。 能源监测管理系统的重要性 1、实现节能减排的目标 通过系统&#xff0c;可…

电动汽车充放电V2G模型

威♥关注“电击小子程高兴的MATLAB小屋”获取更多资料 1主要内容 本程序主要建立电动汽车充放电V2G模型&#xff0c;采用粒子群算法&#xff0c;在保证电动汽车用户出行需求的前提下&#xff0c;为了使工作区域电动汽车尽可能多的消纳供给商场基础负荷剩余的光伏电量&#xf…

一例恶搞的样本的分析

概述 这个病毒会将自身伪装成水印标签系统&#xff0c;通过感染桌面和U盘中的后缀名为.doc、.xls、.jpg、.rar的文件来传播。会监听本地的40118端口&#xff0c;预留一个简单的后门&#xff0c;利用这个后门可远程执行锁屏、关机、加密文件、开启文件共享等操作。 样本的基本…