Vue3：找不到注入“符号（松果）”答案

【问题标题】：Vue3: injection "Symbol(pinia)" not foundVue3：找不到注入“符号（松果）”
【发布时间】：2022-08-11 15:06:46
【问题描述】：

我正在使用 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>

有什么问题以及如何解决？

标签： javascript vue.js vite quasar-framework pinia

【解决方案1】：

该问题与 WebStorm 有关。它会自动创建此导入：

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

而不是这个

import {createPinia} from 'pinia'

【讨论】：

【解决方案2】：

对我来说是： import { isTemplateNode } from '@vue/compiler-core'

剪切并重新加载服务器工作正常

【讨论】：