Le titre réécrit est : Comment puis-je accéder à la boutique Pinia dans une application VueJS enfant ?

Question

Je crée une bibliothèque pour réutiliser les applications VueJS dans plusieurs autres projets. C'est un plugin qui génère et affiche des formulaires dans n'importe quel projet VueJS.

J'ai utilisé Pinia comme magasin dans cette bibliothèque et Vite pour la construire. Comment rendre le stockage d'une bibliothèque lisible au niveau du projet qui l'importe ? Mon problème est que dans l'extension Chrome pour VueJS, je n'ai pas accès au magasin.

Exemple de la bibliothèque J'ai créé cette boutique dans la bibliothèque :

en main.ts 文件中，我有 install méthode :

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

    app.use(createPinia())
  },
}

...mais dans mon extension Vue, je ne vois que l'App Store et non la boutique de la bibliothèque...

Je sais que cela fonctionne car lorsque j'utilise "console.log" dans le magasin de la bibliothèque, l'élément status affiche la valeur correcte !

Pile :

• VueJS : 3.2.41
• Pinia : 2.0.23
• Visité : 2 septembre 2015

Answer 1

J'ai trouvé la solution sur Reddit. Si vous utilisez Pina pour construire la bibliothèque, elle doit être dans 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',
        },
      },
    },
  },
})