pinia报错:getActivePinia was called with no active Pinia. Did you forget to install pinia?

这篇具有很好参考价值的文章主要介绍了pinia报错:getActivePinia was called with no active Pinia. Did you forget to install pinia?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

项目:vue3+pinia+vite+element-plus


问题描述

pinia.mjs:1692 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?

错误:在没有激活Pinia的情况下调用getActivePinia。

报错代码:login.ts文件下

import { useUserStore } from '../../store/user'
import { useRoute } from 'vue-router'
const user = useUserStore()

报错位置:login.ts文件执行位置:
layout组件中。

原因分析:

报错:在没有激活Pinia的情况下调用getActivePinia

分析:

  1. login.ts中应用了pinia状态管理
  2. main.ts文件中尚未app.use(store),已经在layout文件中运行了login.ts文件

这里的问题像是异步导致的(不确定),main.ts中app.use(store).use(router).mount(“#app”),先挂store再挂router也不行,所以猜测是异步。


解决方案:

import store from '@/store/index.ts'
import { useUserStore } from '../../store/user'
import { useRoute } from 'vue-router'
const user = useUserStore(store)

以上是vue3中pinia的用法,在需要的页面再次引入pinia实例store即可。不同的是,其他页面引入,只需用const user = useUserStore(),激活pinia前引入需要传入pinia实例:const user = useUserStore(store)文章来源地址https://www.toymoban.com/news/detail-450014.html

到了这里,关于pinia报错:getActivePinia was called with no active Pinia. Did you forget to install pinia?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储

    使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。 存储方式 : localStorage sessionStorage pinia-plugin-persistedstate 中文官网 pinia 中文官网 安装和使用 pinia ,请参考使用pinia文章。 安装 pinia-plugin-persistedstate : 使用前先将 pinia-plugin-persistedstate添加到pinia实例上。 在添加的时

    2023年04月17日
    浏览(47)
  • 【pinia】新一代更好用的状态管理器Pinia

    目录   一,Pinia状态管理库 1.Pinia介绍 2.Pinia的核心特性 3.核心概念 4.Pinia vs Vuex 5.Pinia Vuex的不同 6.Pinia名字 二,Pinia基本使用 1.安装Pinia 2.配置main.ts文件 3.创建store/index.ts文件 4.使用数据 三,状态更新和Actions 四,Pinia和VueDevtools 1.Pinia介绍 Pinia的设计主要是服务于Composite API(

    2024年02月01日
    浏览(42)
  • Pinia 数据持久化储存(pinia-plugin-persistedstate)

    插件官网地址: https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html 这里对插件的安装就不多赘述了,放两张官网的截图 使用命令:npm i pinia-plugin-persistedstate (1)将store的state中的全部数据进行缓存,直接在state同级下面添加persist对象 此时,默认将数据存放在浏览器的

    2024年02月01日
    浏览(38)
  • Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么

    知识专栏 专栏链接 Vuex知识专栏 https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482 Vuex官方文档 https://vuex.vuejs.org/zh/ Pinia官方文档 https://pinia.web3doc.top/ 最近在 前端的深入学习过程 中,接触了与 状态管理 相关的内容,涉及到 与vue2适配的vuex 和 与vue3适配的pinia ,因此

    2024年02月03日
    浏览(51)
  • 【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用

    刷新浏览器后,重新加载页面时会重新初始化 vue、 pinia,而 pinia 中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据就没了。 在实际开发中,浏览器刷新时,有些数据希望是保存下来的。如用户登录后,用户信息会存储在全局状态中,如果不持久化状态,那么每次

    2024年02月07日
    浏览(43)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(55)
  • 如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

    想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api 。 我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp

    2024年02月08日
    浏览(32)
  • vue3使用pinia和pinia-plugin-persist做持久化存储

    插件和版本 src/store/home.js(可直接复制) 参考文章1 参考2 参考3

    2024年02月13日
    浏览(41)
  • Vue的鼠标键盘事件 pinia和vuex的区别 Vuex 和 Pinia 的优缺点

    鼠标事件(将v-on简写为@) 键盘事件 输入框事件 但是element-ui在实际使用时,前四条触发方法全部都是input方式( 在 Input 值改变时触发 )触发,遂使用原生的@blur才完成效果 表单输入相关修饰符  .lazy     input 输入完毕时 .number   input只获取数字类型的输入 .trim   去除用户输入中

    2024年02月12日
    浏览(44)
  • 抛弃Vuex,使用Pinia

    1.简介 官网 Pinia 起始于 2019 年 11 月左右的一次实验,其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起,我们就倾向于同时支持 Vue 2 和 Vue 3,并且不强制要求开发者使用组合式 API,我们的初心至今没有改变。除了 安装 和 SSR 两章之外,其余章节中提到的 API 均

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包