vue3项目引入pinia报错的简单解决
作者:Jl.610
这篇文章主要介绍了vue3项目引入pinia报错的简单解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3项目引入pinia报错
1.控制台错误提示:getActivePinia was called with no active Pinia. Did you forget to install pinia?
2.报错原因
pinia集成顺序错误 挂载已经结束,但pinia集成失败 运行报错
3.解决方案:调整顺序将 pinia的集成放在#app的挂载之前
app.use(createPinia()).use(router).mount('#app')
vue3+Pinia使用经历(常见报错、警告)
近期在路由传参中使用params时发现报了这么一个错误:
const Edit = (scope) => { const val = JSON.stringify(scope) router.push({ name: 'upload', params: { val } }) }
点进链接后提示让我使用pinia或者vuex状态管理,于是照着pinia文档创建了pinia.js页面用来存放数据:
//pinia.js import {defineStore} from 'pinia' import {reactive} from 'vue' export const usePiniasStore = defineStore('alerts', () => { const arr = reactive({ msg: '' }) function getMsg(e) { arr.msg = e } return { arr, getMsg } })
将组件中的数据传入pinia.js文件:
//dishes.vue import { usePiniasStore } from '@/store/pinia' export default { setup() { const dishesStore = usePiniasStore() const Edit = (scope) => { const val = JSON.stringify(scope) dishesStore.getMsg(val) router.push({ name: 'upload' }) } } }
紧接着报了这么个错误:
百度了一下告诉我要先挂载再使用,于是我将createApp、createPinia、App引入进行挂载:
//dishes.vue import { usePiniasStore } from '@/store/pinia' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from '@/App.vue' export default { setup() { const pinia = createPinia() const app = createApp(App) app.use(pinia) const dishesStore = usePiniasStore() const Edit = (scope) => { const val = JSON.stringify(scope) dishesStore.getMsg(val) router.push({ name: 'upload' }) } } }
这个时候再在另一个组件中便能取到pinia.js中的数据了:
//upload.vue import { usePiniasStore } from '@/store/pinia' export default { setup() { const storex = usePiniasStore() const etid_data = storex.arr.msg console.log(etid_data); } }
至此,问题解决!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。