Der umgeschriebene Titel lautet: Wie kann ich in einer untergeordneten VueJS-Anwendung auf den Pinia-Store zugreifen?

Question

Ich erstelle eine Bibliothek, um VueJS-Anwendungen in mehreren anderen Projekten wiederzuverwenden. Es handelt sich um ein Plugin, das Formulare in jedem VueJS-Projekt generiert und anzeigt.

Ich habe Pinia als Lager in dieser Bibliothek und Vite für den Bau verwendet. Wie kann ich den Speicher einer Bibliothek auf der Ebene des Projekts, das ihn importiert, lesbar machen? Mein Problem ist, dass ich in der Chrome-Erweiterung für VueJS keinen Zugriff auf den Store habe.

Beispiel aus der Bibliothek Ich habe diesen Shop in der Bibliothek erstellt:

in main.ts 文件中，我有 install Methode:

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

    app.use(createPinia())
  },
}

...aber in meiner Vue-Erweiterung sehe ich nur den App Store und nicht den Store der Bibliothek...

Ich weiß, dass es funktioniert, denn wenn ich „console.log“ im Bibliotheksspeicher verwende, zeigt das Statuselement den richtigen Wert an!

Stapel:

• VueJS: 3.2.41
• Pinia: 2.0.23
• Besucht: 2. September 2015

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',
        },
      },
    },
  },
})