vue3+ts+vite库开发,库被引用时报错“getActivePinia()“ was called but there was no active Pinia.的解决方案

我在开发一个基于vue3、TS、vite的库时,用到了pinia管理状态,库发布后,在项目中引用该库,浏览器控制台报错:

"getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

查看pinia官方文档,找到这样的描述:  

在组件外使用存储#

Pinia store 依靠 pinia 实例在所有调用中共享同一个 store 实例。 大多数情况下,只需调用您的“useStore()”函数即可开箱即用。 例如,在 setup() 中,您无需执行任何其他操作。 但在组件之外,情况有些不同。 在幕后,useStore() injects 你给你的app 的pinia 实例。 这意味着如果 pinia 实例无法自动注入,您必须手动将其提供给 useStore() 函数。 您可以根据您正在编写的应用程序的类型以不同的方式解决这个问题。

在 setup() 之外使用存储#

如果您需要在其他地方使用商店,则需要将 pinia 实例 已传递给应用程序 传递给 useStore() 函数调用:

const pinia = createPinia()
const app = createApp(App)

app.use(router)
app.use(pinia)

router.beforeEach((to) => {
  // ✅ 这将确保正确的商店用于
  // 当前运行的应用
  const main = useMainStore(pinia)

  if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
})

但我的pinia使用的是vue3单文件setup内标准用法:

vue3+ts+vite库开发,库被引用时报错“getActivePinia()“ was called but there was no active Pinia.的解决方案_第1张图片

而且在开发库时一切正常,但发布后作为npm依赖被引用到项目就报错了,我试过将库构建出的生产版js文件直接置入项目中引用,就正常了。

到这里,我似乎找到了点头绪,在库开发时,pinia的store是在库项目内vue单文件setup里直接使用的,库项目main.ts安装了pinia

vue3+ts+vite库开发,库被引用时报错“getActivePinia()“ was called but there was no active Pinia.的解决方案_第2张图片

在项目编译时将pinia实例注入给了单文件setup里的useCounterStore(), 故在库开发时能正常运行。但库在以vite的库模式构建后,useCounterStore()在库生产文件被作为npm依赖调用时,并没有了之前的“main.ts安装pinia生成pinia实例,并在编译时注入给useCounterStore”,因为是以库模式编译构建的,“生成实例和注入”部分没有被编译进库。

那该如何解决呢?没有pinia实例注入到useCounterStore,那手动注入了是不是就行了?于是展开实验:

vue3+ts+vite库开发,库被引用时报错“getActivePinia()“ was called but there was no active Pinia.的解决方案_第3张图片

 然后构建打包发布到npm,引用的项目安装新版库npm依赖,然后跑起来,不报错了!一切正常。

总结:在库开发时,pinia在作为被以npm依赖的方式引用时,store实例化时没有被注入pinia实例,所以需要手动注入,但请注意:如果多个地方共用一个store或者多个store之间有逻辑关联,那么需要给他们注入同一个pinia实例,也就是需要在唯一的地方生成一个pinia实例,然后导出,其他需要实例化store的地方引入这个唯一pinia实例,然后手动注入给store:useStore(pinia)。

你可能感兴趣的:(typescript,前端,vue,javascript)