小程序 getActivePinia was called with no active Pinia. Did you forget to install pinia?

news2024/11/21 0:24:06

小程序项目使用pinia做状态管理报错:
Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
在这里插入图片描述
app运行打包时有个同样的错误
在这里插入图片描述
错误原因是:在外部js/ts中使用时 pinia还没有完成初始化
例如

// login.ts文件中
import { storeToRefs } from "pinia";
import useUserStore from "@/store/user";
const { user, userState } = storeToRefs(useUserStore());

在外部js/ts中导入useUserStore 后立马声明变量const { user, userState } = storeToRefs(useUserStore()); 就会出现上面的报错清空

解决方案:
将 const { user, userState } = storeToRefs(useUserStore()); 写在函数里面

by the way: 网上查找问题的解决方案时,有的原因是在setup 之外调用了 usestore,大家自查这种情况吧

还有一个方案时在外部js/ts中使用的时候,先导入pinia ,如下方式

import pinia from "@/store/pinia";
import { userState } from "@/store/user";
const store = useUser(pinia)// 这里一定要把 pinia传入进去

但是我在使用的过程中会出现一个时间差,刚登录赋值,随后使用过程的时候还是空值的情况
(大胆的猜测可能因为在不用页面导入了login.ts ,然后拿到的是赋值前后不同时期的值😂)
不知道大家能不能理解我想表达的意思,会不会也出现这种情况。也有可能这个方案也是可行的额,但我的代码逻辑不适合这个方案😂😂😂

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

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

相关文章

Collections类详解

目录 一.Collections概述: 1.1什么是Collections类: 1.2 Collections类和collection的区别和联系: 二. Collections类的主要方法: 一.Collections概述: 1.1 什么是Collections类: Java.util.Collections…

【Node.js】Express框架的基本使用

✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 目录 初识Express Express简介 什么是Express 进一步理解 Express Express能做什么 Express的基本使用 …

前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

目录一、什么是Token二、获取token三、Token失效处理注意点1、主动退出2、Token过期① 逻辑图②方案③代码实现3、被人顶号① 逻辑图② 方案③代码实现一、什么是Token Token是服务端生成的一串字符串,当用户第一次登陆成功后,服务器会生成一个token&am…

vue 实现自适应屏幕

1.安装自适应屏幕插件(优先使用vscode安装,需要调整px转化rem比例) (1)安装插件: npm i lib-flexible --save (2)mian.js引入: import lib-flexible/flexible.js 2. 如果…

java中controller层是干嘛的?

最近在研究开源框架的源码,打算改写开源框架,适用于自身的业务场景。于是找到了一个框架(spiderFlow)。 根据他的git上的教程,搭建了一个。 controller层,在我们写代码的时候,一般为接口层,与前端&#xf…

CSS锥形渐变实现环形进度条

10月份因为疫情原因、又开启了居家办公模式,空闲之余,与其选择“躺平”,不如去做一些有意义的事情,内心的想法驱使着我去做些什么,但是又没有合适的素材,直到接手了最近的一个可视化项目,一个图…

若依框架---权限管理设计

前言 若依权限管理包含两个部分:菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称,可以细分为目录、菜单和按钮,以若依自身为例: 目录,就是页…

关于古老的jsp页面的知识汇总(超详细)

1. 为什么要开发出来jsp文件呢&#xff1f; 面对需要将大量的结果&#xff0c;甚至是一整个<html>页面返回给响应体&#xff0c;之前的方法就显得十分麻烦。 之前我们是这样将结果返回给响应体的&#xff0c;如下图&#xff1a; 于是就设计了jsp文件&#xff0c;用来解决…

antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制

限制上传文件格式.rar、.zip、.pdf、.jpg、.png、.docx antd 中upload对于限制上传文件格式的属性是accept&#xff0c;在开发的过程中&#xff0c;accept对于.doc、.docx、.pdf、.png、.jpg、.rar&#xff0c;格式的限制是完全没有问题的。但是测试和我说&#xff0c;当选择文…

前端开发之vue-grid-layout的使用和实例

前端开发之vue-grid-layout的使用和实例前言效果图一、vue中简单案例1、安装组件NPMYarn2、vue文件二、vue3使用&#xff08;vue文件&#xff09;1、需要导入vue3支持的该版本插件2、在mian.js里引入&#xff1a;三、在IE上无法打开&#xff0c;并报错缺少&#xff1a;&#xf…

【TypeScript基础】TypeScript之常用类型(下)

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 上篇文章讲解了TypeScript的一些常用类型&#xff0c;&#x1f449;&#x1f3fb;详细内容请阅读【TypeScript基础】TypeScript之常用类型&#xff08;上&#x…

解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案

目录 前言 第一种 第二种 第三种 前言 大家好呀&#xff01;我是爷爷的茶七里香&#xff0c;今天遇到了一件&#x1f95a;疼的事&#xff0c;一个vuevant写的APP&#xff0c;更换了电脑之后运行不起来&#xff0c;就很奇怪很离谱&#xff0c;报错信息如下&#xff1a; ER…

使用Iframe打印预览pdf,兼容谷歌火狐浏览器

功能场景&#xff1a; 点击页面的打印按钮&#xff0c;可以调用浏览器的打印功能&#xff0c;并预览打印pdf文件。解决火狐浏览器出现about:blank问题。 功能实现&#xff1a; 实现思路&#xff1a; 使用接口获取pdf文件的二进制流&#xff0c;响应类型为blob将拿到的二进制…

vite 本地运行首次进入页面加载慢问题

思考 vite的适用场景是什么&#xff1f; 由于我使用了tailwindcss插件 使用webpack 每次启动所有的项目的css样式都预先使用tailwindcss 转换成css 性能普通的电脑启动项目需要1分钟到2分钟。不过首次加载不会有什么多大的延迟&#xff0c;按需导入的页面加载也不会有多大的延…

博客项目- SSM 实现

文章目录1. 创建项目2. 数据库设计3. 前置任务3.1 拦截器3.2 统一数据格式3.3 创建一个 Constant3.4 统一异常处理3.5 密码加密4. 功能实现4.1 登录功能4.2 注册功能4.3 博客列表页 &#xff08;功能实现&#xff09;4.3.1 左侧框4.3.2 右侧框 (分页功能 页面显示)4.4 博客详情…

【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片 1、简介 插入图片 : 插入图片方式 : 在 HTML 中 , 使用 <img> 标签可以插入一张图片 ;插入图片适用场景 : 显示 内容 , 按钮 , 一般都使用 插入图片 的方式 展示图片 ,设置插入图片大…

IDEA从零到精通(26)之MybatisX插件的安装与使用

文章目录作者简介引言导航概述安装插件插件的使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的…

前端发起请求,后端响应请求的整个过程

文章目录前端注册页面axios 请求方法URL 路径配置自定义 axios方法封装后端创建服务器模块接口方法模块连接数据库本文分为&#xff1a;前端、后端两部分讲诉。以下是前端发送请求到服务器&#xff0c;服务器响应前端&#xff0c;的整个过程的图解&#xff1a;前端 前端主要是…

在vue项目当中绑定键盘事件

在vue项目当中&#xff0c;有时会遇到为文本输入框或者button按钮绑定键盘事件&#xff0c;最常见的就是enter回车事件。 按照vue官网给出的方法是&#xff1a; v-on:keyup.enter 简写&#xff1a;keyup.enter &#xff08;注意&#xff1a;如果是绑定在组件上的话&#xff…

让她/他心动的告白,页面制作(9个页面+链接+代码,原生HTML+CSS+JS实现)

文章目录一、pikachu告白信件1.效果图2.代码1.envelope.html2.envelope.css3.pikachu.html4.pikachu.css二、告白小宇宙1.效果图2.代码1.index.html2.index.css三、流光爱心1.效果图2.代码1.index.html2.index.css3.index.js四、520贺卡&#xff08;1&#xff09;1.效果图2.代码…