重寫後的標題為：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',
        },
      },
    },
  },
})