将 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()