首页 > 其他分享 >当在js文件里引入pinia时报错:Uncaught Error: []: getActivePinia was called with no active Pinia

当在js文件里引入pinia时报错:Uncaught Error: []: getActivePinia was called with no active Pinia

时间:2023-07-17 21:00:40浏览次数:37  
标签:no getActivePinia js pinia router import useStore store

1、问题背景

  我在一个 js 文件里需要使用 pinia 去修改状态存储里的内容,但是在引入 pinia 的时候,比如 cont store = useStore() 时发现报错:getActivePinia was called with no active Pinia.

  说是实例在文件中使用的时候,pinia实例没有被挂载。发生错误的原因是因为我在js文件中

import { useStore } from '@/store'
const store = useStore()

  此时,pinia并没有完成挂载。

2、解决办法

(1)我们需要在store文件下新增一个基础文件,内容为

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

(2)然后在你引用的页面注册

import pinia from '@/store/pinia.js'
import { useStore } from '@/store'
const store = useStore(pinia)

  就可以解决了

3、具体出现的原因是:

  由于在main.js中,不管怎么注册,router总是比pinia之前创建,所以,当我们在router.js中使用pinia时,就会出现pinia还未注册的提示,我们只需要重新注册就行。

4、遇到的问题

  在进行上面的改动之后,我发现对状态管理的字段的修改,并没有进行响应式的变化。怎么回事呢?后来发现是因为 main.js 里注册的有问题。就是在经过上面的改造后,我们还需要把原来在 main.js 里对 pinia 进行的注册,需要进行改造下。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
// ...
const app = createApp(App)
app.use(router).use(createPinia()).mount('#app')

// 对应的位置需要改成下面这样
import pinia from './store/pinia.js'

app.use(router).use(pinia).mount('#app')

 

标签:no,getActivePinia,js,pinia,router,import,useStore,store
From: https://www.cnblogs.com/goloving/p/17561209.html

相关文章

  • 【雕爷学编程】Arduino动手做(164)---Futaba S3003舵机模块2
    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题......
  • 命令_查看占用端口 netstat -ano|findstr "8080"
    查看占用端口 netstat-ano|findstr"8080" tasklist|findstr"12448"netstat-ano|findstr"8080"列说明1:协议 2:本地地址    3:外部地址   4:状态     5:PID查看PID对应的进程名称:tasklist|findstr"12448"......
  • js最简代码获取多个数组的交集
    直接上代码!//定义三个数组leta=[1,3,5,7,9];letb=[1,2,4,5,7];letc=[1,3,5,8,7];constgetIntersection=(a,...array)=>{//...array表示可以传入多个数组 returna.filter(item=>array.every(elem=>elem.includes(item)))}letnewArray=getIntersection(a......
  • cloudflare-notion-重定向
    添加DNS记录规则-页面规则......
  • 【雕爷学编程】Arduino动手做(163)---大尺寸8x8LED方格屏模块7
    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题......
  • Statement not bound, 使用MybatisPlus时的SqlSessionFactory和MybatisSqlSessionFact
    最近首次在真实项目中,实践用SpingBoot整合Mybatis、MybatisPlus、Spring、多数据源等常见SSH整合问题。遇到一个难题,MybatisPlus遇到了经典的问题“Statementnotbound”。如果是Mybatis,很容易解决,扫描到Mapper接口文件和Mapper.xml文件,肯定能搞定。这次整合进了MybatisPlus,之前......
  • React(二):JSX
    一、什么是JSXJSX是一种将HTML和JavaScript结合的语法扩展,它允许在JavaScript代码中直接编写HTML标记。上一节在学习元素渲染的时候就已经使用过JSX语法来进行元素的定义:constelement=<h1>HelloReact</h1>;如上述语句所示,既不是字符串,又不是Html,而且直接在javascript中......
  • 【cJSON】轻量级的C语言JSON解析器
    1.JSON与cJSONJSON——轻量级的数据格式JSON全称JavaScriptObjectNotation,即JS对象简谱,是一种轻量级的数据格式。它采用完全独立于编程语言的文本格式来存储和表示数据,语法简洁、层次结构清晰,易于人阅读和编写,同时也易于机器解析和生成,有效的提升了网络传输效率。JSON......
  • 【雕爷学编程】Arduino动手做(163)---大尺寸8x8LED方格屏模块6
    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题......
  • jupyter Notebook:魔法命令
    JupyterNotebook是一个开源的交互式编程环境,用于创建和共享包含实时代码、文本、图像和可视化输出的文档。它交互式的编程方式是一大亮点,因为我们在数据分析的过程中,常常是一边分析,一边看分析结果,根据分析结果再调整数据或者分析参数。有了 JupyterNotebook,代码和运行结果可......