Question

如何在子 VueJS 应用程序中使用 Pinia 商店

2022-10-26

1295

vue.js vuejs3 vite pinia

我正在创建一个库，以便在其他几个项目中重用 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
Vite：2.9.15

Answer 1

我在 reddit 上找到了解决方案。如果您使用 Pina 构建库，则在 vite.config.ts 文件中，您必须在 external 和 globals 中的 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',
        },
      },
    },
  },
})