Vue3：找不到注入“Symbol（pinia）”

Question

我正在使用 Vue 3 + Vite 插件進行 Quasar + Pinia 進行商店管理。 我遵循了所有官方文檔（Quasar，Pania）。 但我收到了這個錯誤。

    [Vue warn]: injection "Symbol(pinia)" not found. 
    ...
    runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function 
      at <ViewLogin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
...
    runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
      
    pinia.esm-browser.js:1638 Uncaught (in promise) Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
        const pinia = createPinia()
        app.use(pinia)
    This will fail in production.
        at useStore (pinia.esm-browser.js:1638:19)
       
    js:185:25)

main.js

import {createApp} from 'vue'
import {Notify, Quasar} from 'quasar'


// Import icon libraries
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
import '@quasar/extras/material-icons-round/material-icons-round.css'

// A few examples for animations from Animate.css:
// import @quasar/extras/animate/fadeIn.css
// import @quasar/extras/animate/fadeOut.css
// Import Quasar css
import 'quasar/src/css/index.sass'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'

// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'
import router from "./router/router";
import i18n from "./i18n/i18n"
import {createPinia} from "pinia/dist/pinia";
import {useLoginStore} from "./stores/login";

const app = createApp(App)

// app.config.globalProperties.loginStore = useLoginStore();
app.use(Quasar, {
    plugins: {
        Notify,
    }, // import Quasar plugins and add here
})
app.use(router)

app.use(i18n)
app.use(createPinia())
// Assumes you have a <div id="app"></div> in your router.html
app.mount('#app')

在將“const store = useLoginStore()”添加到組件的代碼后，我收到了這個錯誤。

<script setup>
import {ref} from 'vue'
import {storeToRefs} from 'pinia'
import {useLoginStore} from '../../stores/login'
import {useQuasar} from 'quasar'

const $q = useQuasar()

const email = ref(null)
const password = ref(null)

const store = useLoginStore()
const {loginEmail} = storeToRefs(store)


</script>

有什么問題以及如何解決？

Answer 1

該問題與 WebStorm 有關。 它會自動創建此導入：

import {createPinia} from "pinia/dist/pinia";

而不是這個

import {createPinia} from 'pinia'

Answer 2

對我來說是： import { isTemplateNode } from '@vue/compiler-core'

剪切並重新加載服務器工作正常