將 Pinia 與 Vue.js Web 組件一起使用

Question

我正在嘗試將Pinia的商店與使用 Vue.js 創建的web組件一起使用。
要安裝 Pinia 並使用它，您應該使用app.use(pinia) ：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

1. 我正在使用 Vuejs 創建 Web 組件。 我正在重命名MyComponent.ce.vue中的組件。

2. 然后我定義自定義元素：

import { defineCustomElement } from 'vue'
import MyComponent from './components/MyComponent.ce.vue'

// convert into custom element constructor
const ExampleElement = defineCustomElement(MyComponent)

// register
customElements.define('my-component', ExampleElement)

3. 我試圖創建一個商店：

import { createPinia } from 'pinia'
const pinia = createPinia()

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0, name: 'Eduardo' }),
    getters: {
      doubleCount: (state) => state.count * 2,
    },
    actions: {
      increment() {
        this.count++
      },
    },
})

但我得到這個錯誤：

未捕獲的錯誤：[]：調用 getActivePinia 時沒有活動的 Pinia。 你忘了安裝pinia嗎？
const pinia = createPinia()
app.use（松果）

對我來說為什么會出現此錯誤是有道理的，但是如果我不能使用app.use(pinia) ，我該如何使用 Pinia？

Answer 1

在 main.js 中創建 pinia 后，您將在 store 中重新創建它。 從您的商店中刪除這些行：

import { createPinia } from 'pinia'
const pinia = createPinia()