問題已更新
#我嘗試使用 Pinia 的商店以及使用 Vue.js 建立的 Web 元件,但控制台中出現此錯誤:
[Vue warn]:在
處找不到注入「Symbol(pinia)」
我有一個非常簡單的例子。
import { defineCustomElement } from 'vue' import HelloWorld from './components/HelloWorld.ce.vue' const ExampleElement = defineCustomElement(HelloWorld) customElements.define('hello-world', ExampleElement)
import { defineStore, createPinia, setActivePinia } from "pinia"; setActivePinia(createPinia()); export const useCounterStore = defineStore('counter', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++; }, }, });
<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>
在 main.js 中建立 pinia 後,您將在商店中重新建立 pinia。從您的商店中刪除這些行: