pinia报错"getActivePinia()" was called but there was no active Pinia.

6,122 阅读1分钟

环境:Vue3 + router4 + pinia

有个项目中我使用pinia创建了个loadingStore 专门用于是否在加载中,于是就在二次封装的request.ts文件中使用了,但是我的登录是个全局的组件,所以就将登录弹窗的所有信息放在了loginStore中。 但是我在loginStore中使用登录接口的时候,发现报错: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

image.png

// request.ts
import axios from 'axios';
import {useLoadingStore} from "@/store/loading";
...
const loading = useLoadingStore()

这意思可能是pinia用到了但是没找到。在网上找到个答案。

// request.ts
import axios from 'axios';
import {useLoadingStore} from "@/store/loading";
import pinia from "@/utils/plugins/store"; // 加了这行
...
const loading = useLoadingStore(pinia) // 将pinia传进去

这样一来问题就解决了 这个pinia就是main.ts里app.use要引用的pinia 如果不是单独的文件 指定导出也行 希望可以帮到大家 原文地址:www.yii666.com/blog/450014…

后续更新:根据上面的方法 会导致pinia持久化存储插件失效 解决方法就是一切使用到的仓库都在方法内使用,也无需在使用到的ts文件中给引入的仓库传递pinia了,原文链接:pinia一个模块引入另一个模块报错“getActivePinia()“ was called but there was no active Pinia._亦非余的博客-CSDN博客

import axios from 'axios';
import { message } from 'ant-design-vue';
import {useLoadingStore} from "@/store/loading";
import {useUserInfoStore} from "@/store/userInfo";

...

requests.interceptors.request.use((config) => {
    const userInfo = useUserInfoStore()
    const loading = useLoadingStore()
    Object.assign(config.headers,{token:userInfo.token})
    loading.setLoading(true)
    return config
})