当前位置：文江博客话题详情

如何在NPM软件包内使用PINIA？

发布于 2025-01-18 00:01:02 字数 195 浏览 2 评论 0原文

我有类似的问题如此处提到< /a>，但就我而言，是 Pinia。让 Pinia 在 Vue 组件之外工作要困难得多，因为“未捕获的错误：[

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

素食主义者 2025-01-25 00:01:03

这不是最干净的解决方案，因为它需要在将使用您的包的项目中安装并初始化 Pinia，但如果您这样做是为了内部使用，那完全没问题。

所以，在我的包中，它看起来像这样：

    install(app, options = {}) {
        greetings()

        const { $pinia } = options

        if (!$pinia) {
            throw new Error(`No active Pinia instance was passed to your package`)
        }

        let core_store = useCoreStore($pinia)

// moar code

在其他项目中：

import MyPackage from '@rusinas/my-package'

app.use(ModernEditor)

const pinia = createPinia()

app.use(MyPackage, { 
    $pinia: pinia
})

app.use(pinia)

app.mount('#app')

我注意到在 SPA 模式下，您可能不需要为您的包提供活动 pinia，它可以自行解决，您只需要确保 app.use(pinia) 在初始化包之前。但这在 Nuxt SSR 模式下不起作用，所以是的，需要这种解决方法:(

我认为我们应该在 Pinia 的存储库中提出这个问题。我不明白为什么它必须以这种方式工作。您需要在setup() 对于应用程序来说非常频繁，有时甚至至关重要，因此它应该更容易

另外，请记住存储名称冲突的可能性在整个应用程序

P.PS

SSR 解决方案中应该是唯一的：
插件/MyPackage.plugin.js：

import { defineNuxtPlugin } from '#app'

import MyPackage from '@rusinas/my-package'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(MyPackage, {
        $pinia: nuxtApp.$pinia,
    })
})

Not the cleanest solution, because it requires to have Pinia installed and initialized in the project where your package will be used, but if you're doing this for internal use it is totally okay.

So, in my package it looks like this:

    install(app, options = {}) {
        greetings()

        const { $pinia } = options

        if (!$pinia) {
            throw new Error(`No active Pinia instance was passed to your package`)
        }

        let core_store = useCoreStore($pinia)

// moar code

And in other project:

import MyPackage from '@rusinas/my-package'

app.use(ModernEditor)

const pinia = createPinia()

app.use(MyPackage, { 
    $pinia: pinia
})

app.use(pinia)

app.mount('#app')

I noticed that in SPA mode you may not need to provide active pinia to your package, it could figure it out itself, you just need to make sure to app.use(pinia) before you initialize you package. But this doesn't work in Nuxt SSR mode, so yeah, this workaround required :(

I think we should raise this question in Pinia's repository. I don't see why it have to work this way. Cases where you need stores outside of setup() are so often and even crucial sometimes for applications, so it should be much easier.

P.S.

Also, keep in mind the possibility of store names collisions. Names should be unique across entire application

P.P.S.

SSR solution:
plugins/MyPackage.plugin.js:

import { defineNuxtPlugin } from '#app'

import MyPackage from '@rusinas/my-package'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(MyPackage, {
        $pinia: nuxtApp.$pinia,
    })
})

回复收藏 0 原文