脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3项目引入pinia报错

vue3项目引入pinia报错的简单解决

 更新时间：2023年10月10日 10:09:43   作者：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);
    }
}

至此，问题解决！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论