Tajuk yang ditulis semula ialah: Bagaimanakah saya boleh mengakses kedai Pinia dalam aplikasi VueJS kanak-kanak?

Question

Saya sedang mencipta perpustakaan untuk menggunakan semula aplikasi VueJS dalam beberapa projek lain. Ia adalah pemalam yang menjana dan memaparkan borang dalam mana-mana projek VueJS.

Saya menggunakan pinia sebagai kedai di perpustakaan ini dan Vite untuk membinanya. Bagaimanakah saya boleh menjadikan storan perpustakaan boleh dibaca pada tahap projek yang mengimportnya? Masalah saya ialah dalam sambungan krom untuk VueJS saya tidak mempunyai akses kepada kedai.

Contoh dari perpustakaan saya mencipta kedai ini di perpustakaan:

dalam main.ts 文件中，我有 install kaedah:

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

    app.use(createPinia())
  },
}

...tetapi dalam sambungan Vue saya, saya hanya melihat gedung aplikasi dan bukan kedai perpustakaan...

Saya tahu ia berfungsi kerana apabila saya menggunakan "console.log" di stor perpustakaan, elemen status menunjukkan nilai yang betul!

Timbunan:

• VueJS: 3.2.41
• Pinia: 2.0.23
• Dilawati: 2 September 2015

Answer 1

Saya menemui penyelesaiannya di reddit. Jika anda menggunakan Pina untuk membina perpustakaan, ia mesti ada dalam 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',
        },
      },
    },
  },
})