重现步骤
代码如下:
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相对来说还是一个新的工具,理解他的运行原理了,比较容易 排查错误。