Verwendung von Vue.js-Webkomponenten mit Pinia

Question

Frage aktualisiert

Ich habe versucht, den Store von Pinia mit einer Webkomponente zu verwenden, die mit Vue.js erstellt wurde, aber ich habe diesen Fehler in der Konsole erhalten:

[Vue warnen]: Injektion „Symbol(pinia)“ nicht gefunden bei

Ich habe ein sehr einfaches Beispiel.

1. main.ts

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

const ExampleElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', ExampleElement)

2. store.ts

import { defineStore, createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),

  actions: {
    increment() {
      this.counter++;
    },
  },
});

3. HelloWorld.ce.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '../store.ts'

defineProps<{ msg: string }>()

const store = useCounterStore()
</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="store.increment()">count is {{ store.counter }}</button>
  </div>
</template>

Answer 1

在 main.js 中创建 pinia 后，您将在商店中重新创建 pinia。从您的商店中删除这些行：

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