Vue3在router中使用pinia报错的问题解决办法

最新推荐文章于 2024-11-29 16:57:21 发布
原创 最新推荐文章于 2024-11-29 16:57:21 发布 · 5.9k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#webpack #javascript #前端 #vue.js
本文解决了在Vue项目中使用Pinia时遇到的初始化错误问题，详细介绍了如何正确地在Store间引用彼此以及如何避免在Pinia未完全初始化时提前使用Store。

报错会报两个一个是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的地方都改到具体使用的方法里去
再试试，就一切正常了

pinia.defineStore is not a function
最新发布
主攻大数据 人工智能 物联网 安全 低空经济等方向。mtsc 、gtest特邀分享嘉宾
05-19 362
确保你使用的 pinia 版本与你的 Vue 版本兼容。如果你使用的是 Vue 2.x，请确保使用 pinia 1.x 版本。通过以上步骤，你应该能够解决 pinia.defineStore is not a function 的问题。确保在你的 Vue 应用中正确初始化了 Pinia。错误信息表明 pinia.defineStore 不是一个函数，这通常意味着 pinia 没有被正确导入或初始化。然后，确保在使用 defineStore 之前，Pinia 实例已经创建。检查 Pinia 的导入。
uni-app vue3 ts pinia axios router 搭建移动端H5
weixin_37735748的博客
10-07 2927
记录搭建uniapp过程
使用pinia报错：setriderList（）not a function
一个努力不被优化的程序员
11-03 614
setriderList() not a function //setriderList是我定义的事件，你们对应自己的即可这个错误信息表明，你在调用 `setriderList()` 这个函数时出现了问题，因为它不是一个函数。如果你尝试调用函数，但它在你的代码中未定义，这将导致出现“not a function”错误。在这种情况下，你需要确认函数已被正确地定义。例如，确保你在正确的作用域中定义了函数，并且没有在其他地方被重写或删除。
Uncaught TypeError: (0 , import_pinia.defineStore) is not a function
GotYoung的博客
11-18 2487
nvue 引入pinia 在app白屏已解决！！
在router中使用pinia报错解决
weixin_46054431的博客
05-14 8944
在router中使用pinia（getActivePinia was called with no active Pinia. Did you forget to install pinia）报错解决 使用vue3+ts+pinia开发项目中，我相信好多人使用vuex的传统思想在router中使用，但是用这种思想对于pinia就行不通了就会报错，下面简单是解决方案，如有更好的希望大家留言分享。 一、使用步骤 1.首先创建store.ts文件 import { createPinia } from "pini
使用pinia定义store的state属性和actions方法重名导致调用时出现is not a function异常
nopyramid的博客
12-04 2054
直接跳转到这个页面时会提示下面的错误，但是按F5刷新页面，又可以调用actions中的方法获取到服务端的数据​。store的定义如下。state的属性和actions的方法都是permissions​。把actions中的方法改个名称即可，例如getPermissions。
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
热门推荐
qq_44423029的博客
08-17 6万+
超详细步骤vite创建vue3项目（附源码），技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
m0_52775179的博客
11-29 2305
记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。一、使用 Vite 创建 Vue3+TS 项目。
踩坑日记：Object(...) is not a function
Heartnottowake的博客
04-08 1922
vue3，引入useStore的时候，没有加括号，报错 Object(...) is not a function 解决方法就是加上括号，细心细心，不然整个页面崩溃， 查这个问题的时候，还有时候方法命名一样也会出现这个错误，请一定谨慎复查 ...
Object(...) is not a function
weixin_41334434的博客
10-26 2153
本意是在某个方法上加个防抖，但是加了之后就会报这个错误，检查防抖的引入，没有问题。 最后把这个vue文件在路由里进行懒加载，就好了。（感谢大佬） 例如 import index from ('@/views/index') 换成 const index = () => import('@/views/index') ...
pinia使用过程中遇到的问题和疑问
qq_45032178的博客
07-18 2820
使用pinia时，如果仓库中state一开始存储的数据为空，那么我们直接使用仓库数据则会报错导致页面刷新为空。可以通过可选链运算符解决?当然我们可以在仓库的state的hospitalInfo对象中预先配置上我们需要的属性，值为空，这样直接用也不会保存。
vue报错 Object（...）is not a funtion
m0_49789433的博客
09-14 1万+
Object(...) is not a function表示的就是这个对象不是一个函数的意思，这时候我们就要好好检查一下如下细节： 1、函数命名是否是错误的 2、当前界面调用别的引用文件的时候大小写是不是写错了 3. 先去看你用的这个方法是不是一个promise对象，不是promise的话不能.then !! http.post或者http.get都是promise对象 重点:如果不知道如何看的话，直接console.log()一下这个方法就可以知道是否为promise对象 如： ...
uniapp安装使用pinia出现报错at useStore
m0_60459392的博客
12-17 4302
这种情况不要慌，引入pinia请使用vue3.2语法糖写法。uniapp安装使用pinia ，会出现以下报错。
React |报错 TypeError: _store__WEBPACK_IMPORTED_MODULE_2__.default.mouseEnter is not a function
虎鲸虎鲸
09-06 5691
报错内容 40 | const mapDispathToProps = (dispatch) => { 41 | return { 42 | handleMouseEnter() { > 43 | dispatch(actionCreators.mouseEnter()); 44 | } 45 | } 46 | } 参考：...
Vue 3.0 遇到的问题
White feathe 的博客
11-19 6790
Vue3.0 安装 npm i vue@next vue-loader@next npm install vue-router@next npm i webpack webpack-cli webpack-dev-server --save-dev typescript安装依赖 npm install ts-loader --save-dev npm install typescript --save-dev npm install @vue/babel-plugin-jsx -D npm i @babe
pinia踩坑之旅——在组件外使用pinia
Jackson_Mseven的博客
10-19 2359
我们在使用一项不熟悉的技术时往往都是去网上找一篇使用文章看下用法就上手了，这么做的好处时能够最快速的上手在项目中进行使用，但是这类文章往往只会把基本的用法进行描述，而不会把一些坑点说出来，如果在使用时恰好遇到了就非常棘手。我推荐三种我日常使用的比较多的解决办法，以及各自的优缺点：百度没错，你没有看错，就是百度，就是这么朴实无华。把报错复制到百度直接搜结果，如果不是一些比较冷门或者先进的技术问题都能搜得到。优点：速度最快缺点：网上资料质量参差不全，容易遇到一些 ly 文章很耗费时间官网。
Vue3之vue-router、pinia
m0_52744273的博客
04-09 2680
1.路由基础 路由的基本使用 编程式导航 命名视图 2. 路由传参 方式一：就硬写 方式二：通过query和params 带参数的动态路由
vue3在自定义hooks中使用userRoute结果为undefined,如何在自定义hooks中使用userRoute
Lucky_girl_wan的博客
09-09 8290
vue3.0中在setup中使用路由 import { defineComponent } from 'vue' import { useRoute, useRouter } from "vue-router" export default defineComponent({ const route = useRoute() const router = useRouter() console.log(route.query.id) router.push(
vue3中使用pinia报错Uncaught Error: []: getActivePinia was called with no active Pinia. Did，看我代码注释就能解决哈
jsmeng626的博客
03-29 6553
首先我遇到的情况是在store/index.js中，将pinia抽离开来然后在我的main.ts文件中去挂载现在可以清除的看到我是通过回调的方法先去挂载pinia再去挂载的router，因为router中我使用到了pinia，但是很奇怪的是，竟然报错告诉我使用pinia前要先安装，那可以确定我代码中先使用的pinia后挂载的，那就是这一步有问题了，本人怀疑是异步导致的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灰机大大

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值