vue3+typescript开发时用到了pinia却提示出错“Are you trying to use a store before calling “app.use(pinia)“”，问题解决

暂时先用这个名字

已于 2024-10-28 10:23:51 修改

阅读量647

点赞数 4

分类专栏： App 前端文章标签： typescript javascript 前端 pinia vue3 store vue

于 2024-10-28 00:54:37 首次发布

本文链接：https://blog.youkuaiyun.com/snans/article/details/143277502

版权

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

App

38 篇文章

订阅专栏

pinia.mjs:1741 Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

在使用pinia开发标签页时，有两个文件：

记录tabs数据的storeTab.ts
操作tabs的useTab.ts

在useTab.ts中引入了storeTab.ts，这样可以数据和界面等操作在同一个函数内解决，可就产生了错误。

问题的本质

遇到的问题是 getActivePinia() 被调用时没有找到活跃的 Pinia 实例。这通常发生在以下几种情况：

Pinia 未被安装：在 Vue 应用中没有正确安装 Pinia。
调用时机不当：在 Pinia 被安装之前尝试使用 useTabStore。
作用域问题：在某些情况下，Pinia 实例的作用域可能不正确，导致无法找到活跃的 Pinia 实例。
- 全局注册：在 main.ts 中使用 app.use(pinia) 注册 Pinia 实例时，Pinia 会被全局注册到 Vue 应用中。这使得 useStore 函数能够在任何地方访问到状态管理。
- 工具文件中的使用：在工具文件中使用 useStore 时，也需要确保 Pinia 实例已经被全局注册。否则，useStore 会找不到对应的 Pinia 实例，从而无法正常工作。
- 虽然 useStore 本身不依赖于组件上下文，但它依赖于全局注册的 Pinia 实例。在工具文件中，由于没有 Vue 组件的上下文，你需要显式地传入 Pinia 实例，以确保 useStore 能够正确工作。

在这里插入图片描述

解决方案的原理

在 Vue 3 和 Pinia 的组合中，通常有以下两种方式来访问 Pinia 存储：

全局注册：在 main.ts 中全局注册 Pinia 实例，并将其挂载到 Vue 应用实例上。这种方式使得在组件内部可以直接使用 useTabStore() 而无需传递 pinia 实例。
局部注册：在某些情况下，可能需要在非组件文件（如工具函数、服务文件等）中访问 Pinia 存储。这种情况下，需要显式传递 pinia 实例。

具体步骤解释

本方案通过将 Pinia 实例化和导出放在一个单独的文件中，确保了 Pinia 实例在整个应用中是全局唯一的，并且可以在任何需要的地方导入和使用。

创建 pinia.js 文件

// stores/pinia.js
import { createPinia } from 'pinia';

const pinia = createPinia();
export default pinia;

作用：创建一个 Pinia 实例并导出，确保这个实例在整个应用中是唯一的。

修改 main.ts 文件

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import pinia from './stores/pinia';
import router from './router';

const app = createApp(App);
app
    .use(pinia)
    .use(router)
    .mount('#app');

修改 useTab.ts 文件

// tabUtils.ts
import { useTabStore, TabItem } from '../stores/tabStore';
import { useRouter } from 'vue-router';
import pinia from '../stores/pinia';

const tabStore = useTabStore(pinia);

// 其他函数定义...

为什么这样做有效

全局唯一性：

通过将 Pinia 实例化和导出放在一个单独的文件中，确保了整个应用中只有一个 Pinia 实例。这样可以避免多个 Pinia 实例导致的问题。

作用域明确：

在 tabUtils.ts 文件中导入 pinia 实例，并显式地传递给 useTabStore，确保了在调用 useTabStore 时，Pinia 实例是明确的，不会出现找不到活跃 Pinia 实例的情况。

调用时机：

通过在 main.ts 中正确安装 Pinia，确保在应用启动时 Pinia 已经被初始化。这样在其他模块中调用 useTabStore 时，Pinia 实例已经是活跃的。

总结

通过将 Pinia 实例化和导出放在一个单独的文件中，并在需要使用 Pinia 的地方导入这个实例，我们确保了 Pinia 实例的全局唯一性和作用域明确性。这样可以避免 getActivePinia() 调用时找不到活跃 Pinia 实例的问题。希望这些解释能帮助你更好地理解这个问题及其解决方案。

pinia实例是如何传递给useTabStore的？

useTab.ts中是这样加载pinia实例的

const tabStore = useTabStore(pinia);

那这个pinia是如何传递进去的呢？
为什么 useTabStore(pinia) 能工作，即使 defineStore 没有显式接收 pinia 参数？

这个问题涉及到 Pinia 的内部实现机制。详细解释一下：

Pinia 的内部机制

defineStore 函数：

defineStore 是一个高阶函数，用于定义一个存储。
它接受两个参数：存储的 ID 和一个函数或对象。
当你使用 defineStore 定义一个存储时，返回的是一个函数，这个函数用于创建存储实例。

defineStore 的返回值：

defineStore 返回的是一个函数，这个函数在内部会使用传入的 pinia 实例来创建和管理存储。
这个返回的函数（即 useTabStore）在调用时可以接收 pinia 实例作为参数。

useTabStore 函数：

useTabStore 是 defineStore 返回的函数。
这个函数在内部会使用传入的 pinia 实例来创建和管理存储。
即使 defineStore 的回调函数没有显式接收 pinia 参数，useTabStore 函数在调用时仍然可以接收 pinia 实例。

useTabStore 的调用：

当你在 tabTool.ts 中调用 useTabStore(pinia) 时，pinia 实例被传递给 useTabStore 函数。
useTabStore 函数内部会使用这个 pinia 实例来创建和管理存储。

在这个实现中，defineStore 返回的函数（即 useTabStore）在调用时会接收 pinia 实例，并将其用于创建和管理存储。

综上反复烦述

defineStore 返回的函数：useTabStore 可以接收 pinia 实例作为参数，即使 defineStore 的回调函数没有显式接收 pinia 参数。
内部机制：Pinia 的内部实现确保了 useTabStore 在调用时可以正确地使用传入的 pinia 实例。
通过这种方式，Pinia 提供了灵活的存储管理机制，无论是在组件内部还是在非组件文件中。

没用的知识点又增加了

参考：
vue3中使用pinia报错Uncaught Error: []: getActivePinia was called with no active Pinia. Did，看我代码注释就能解决哈
 【已解决】vue3：router + pinia , 在 router.beforeEach 中，使用pinia查询token报错：getActivePinia()“ was ca…
vue3在单独的js文件中使用pinia报错：getActivePinia was called with no active Pinia. Did you forget to install pinia?
vue3的js文件中使用router