Vue3在router中使用pinia报错的简单解决办法

 更新时间:2023年08月23日 09:29:13   作者:灰机大大  
这篇文章主要给大家介绍了关于Vue3在router中使用pinia报错的简单解决办法,什么是pinia,可以理解为状态管理工具,文中通过图文介绍的非常详细,需要的朋友可以参考下

报错会报两个一个是xxxStore WEBPACK_IMPORTED_MODULE_1__.default) is not a function还有一个是getActivePinia was called with no active Pinia

因为接到了要在路由守卫中增加判断的需求,需要用到store中的数据,于是在router里面import了store,beforeEach里use了,然后启动就报异常,去官网翻文档。

https://pinia.web3doc.top/core-concepts/outside-component-usage.html

大概的意思是要在初始化了pinia之后调用才行,得把useStore的逻辑写到方法里,照着操作一遍发现还是xxxStore WEBPACK_IMPORTED_MODULE_1__.default) is not a function。于是乎检查所有Store,发现有些Store中代码是这样的

知晓一二了,一个Store引入另外一个Store,const userStore = useUserStore();的位置应该放在具体方法里面不能放到上面,否则也会像Router那样在pinia初始化之前就被调用从而报xxx is not a function的错误

解决方案:检查所有Store包括js,把这种在方法外部useStore的地方都改到具体使用的方法里去

再试试,就一切正常了

总结

到此这篇关于Vue3在router中使用pinia报错解决的文章就介绍到这了,更多相关Vue3 router使用pinia报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • SpringBoot+Vue 前后端合并部署的配置方法

    SpringBoot+Vue 前后端合并部署的配置方法

    这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue3.0实现插件封装

    vue3.0实现插件封装

    这篇文章主要介绍了vue3.0实现插件封装的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue父子组建的简单通信之控制开关Switch的实现

    Vue父子组建的简单通信之控制开关Switch的实现

    这篇文章主要介绍了Vue父子组建的简单通信之控制开关Switch的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue项目使用PostCSS做h5页面的屏幕适配的配置步骤

    Vue项目使用PostCSS做h5页面的屏幕适配的配置步骤

    PostCSS 是一个用 JavaScript 编写的工具,用于将 CSS 转换为另一种 CSS,在做h5页面的屏幕适配时,结合 PostCSS 的一些插件能轻松实现,下面以结合 postcss-pxtorem 插件为例,详细介绍配置步骤,需要的朋友可以参考下
    2025-02-02
  • vue v-for中key的原理详析

    vue v-for中key的原理详析

    key属性可以用来提升v-for渲染的效率,vue中使用v-for渲染数据的时候,并不会去改变原有的元素和数据,下面这篇文章主要给大家介绍了关于vue v-for中key原理的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue3实现alert自定义的plugins方式

    vue3实现alert自定义的plugins方式

    这篇文章主要介绍了vue3实现alert自定义的plugins方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • electron-vue利用webpack打包实现多页面的入口文件问题

    electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验,需要的朋友可以参考下
    2019-05-05
  • React Diff算法不采用Vue的双端对比原因详解

    React Diff算法不采用Vue的双端对比原因详解

    这篇文章主要介绍了React Diff算法不采用Vue双端对比算法原因详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue 中 createElement 使用实例详解

    Vue 中 createElement 使用实例详解

    Vue 提供了createElement 来创建虚拟dom,方便我们来函数化的方式来定义复杂的组件结构,这篇文章主要介绍了Vue 中 createElement 使用详解,需要的朋友可以参考下
    2022-10-10
  • 如何使用electron将vue项目打包成.exe文件(保姆级教程)

    如何使用electron将vue项目打包成.exe文件(保姆级教程)

    本文给大家介绍如何使用electron将vue项目打包成.exe文件,大家要注意一下vue2项目,使用的vue-element-admin框架,用electron打包成.exe文件,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2024-03-03

最新评论