Estoy usando el complemento Vue 3 + Vite para Quasar + Pinia para la gestión de tiendas. Seguí toda la documentación oficial (Quasar, Pinia). Pero estoy recibiendo este error.
[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)principal.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')Y recibo este error después de agregar 'const store = useLoginStore()' al código del componente.
<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>¿Cuál es el problema y cómo solucionarlo?
El problema estaba relacionado con WebStorm. Crea automáticamente esta importación:
import {createPinia} from "pinia/dist/pinia";en lugar de esto
import {createPinia} from 'pinia'