vue3 Pinia 报错 getActive Pinia was called with no active Pinia

vue3 Pinia 报错 getActive Pinia was called with no active Pinia

重现步骤

代码如下:

main.ts

import { createPinia } from 'pinia';
const app = createApp(App);
import { hasPermission } from '@/utils/permission';
app.use(router).use(createPinia());
app.config.globalProperties.hasPermission = hasPermission;

permission.ts

import useStore from '@/store/user'; // user为pinia的store,里面存放了btns

const store = useStore(); // 调用store
// 根据全局的btns判断当前按钮code 是否在全局之中而判断是否有权限
export function hasPermission(code = '') {
  return code && store.btns.includes(code);
}

意图 | 逻辑

就是将一个方法挂载到app全局实例上,这个方法使用到了userStore
如上代码看起来逻辑没错,看到如下截图,可能不容易直接一眼发现问题

错误截图

在这里插入图片描述

问题原因

仔细上面代码, permission.ts 在全局store还没有挂载到app上的时候,就引入进来了,这时候里面useStore在全局代码下就调用了,这样导致了pinia实例还没挂载。
所以不能在全局下调用store = useStore();
在这里插入图片描述
这样就不会报以上错误了
官方的issue中也有提到这个问题
官方issue
在这里插入图片描述

总结

pinia相对来说还是一个新的工具,理解他的运行原理了,比较容易 排查错误。

  • 10
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值