重写后的标题为：How can I access the Pinia store in a child VueJS application?

Question

我正在创建一个库，以便在其他几个项目中重用 VueJS 应用程序。它是一个在任何 VueJS 项目中生成和显示表单的插件。

我使用 pinia 作为这个库中的商店并使用 Vite 来构建它。如何使库的存储在导入它的项目级别可读？ 我的问题是，在 VueJS 的 chrome 扩展中，我无权访问该商店。

库中的示例我在库中创建了这家商店：

在 main.ts 文件中，我有 install 方法：

export default {
  install: (app: App, options: PluginOptions) => {
    app.component('UsfBuilder', UsfBuilder)

    app.use(createPinia())
  },
}

...但是在我的 Vue 扩展中我只看到应用程序商店，而没有看到库的商店...

我知道它有效，因为当我在图书馆存储中使用“console.log”时，状态元素会显示正确的值！

堆栈：

• VueJS：3.2.41
• Pinia: 2.0.23
• 访问：2015 年 9 月 2 日

Answer 1

我找到了reddit的解决方案。如果您使用 Pina 构建库，则必须在 vite.config.ts 文件中的 rollupOptions 中添加 Pinia 选项外部和全局：

export default defineConfig({
  //...
build: {
    commonjsOptions: {
      esmExternals: true,
    },
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'Formbuilder',
      fileName: 'formbuilder-plugin',
    },
    rollupOptions: {
      external: ['vue', 'pinia'],
      output: {
        globals: {
          vue: 'Vue',
          pinia: 'pinia',
        },
      },
    },
  },
})