vue3 pinia踩坑及解决方案详解
更新时间：2023年03月06日 10:10:11 作者：黑狼传说
这篇文章主要为大家介绍了vue3 pinia踩坑及解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
安装
yarn add pinia # or npm install pinia
用法
// user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user',
state: () => ({
...
}),
actions: {
...
}
})
// components.vue
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
使用中出现的问题
1、Cannot access 'useUserStore' before initialization
重现步骤
通常我们会在路由钩子中判断用户是否登陆，从而进行权限判断。如：
// permission.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import router from './router'
import { useUserStore } from './store/user'
const userStore: any = useUserStore()
router.beforeEach(async(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
// TODO 判断是否登录
if (userStore.name) {
...
}
})
// main.ts
const app = createApp(App)
app.use(createPinia())
import router from './router'
import '@/permission'
app.use(router)
app.mount('#app')
问题原因
代码从上往下执行过程中，遇到const userStore: any = useUserStore()，会进行用户状态模块的获取，但是应用还没有挂载，所以Pinia的全局状态还没有进行初始化。造成了初始化用户模块状态获取时，全局状态并没有初始化，所以造成了当前问题。
解决方案
在路由钩子函数进行用户状态模块的获取，调用路由钩子的时候，意味着全局状态已完全初始化完成。但会造成每次调用路由钩子都获取用户状态模块，会造成资源的浪费（当然可以达到预期目的，但并不是我们需要的）。我们可以在外层声明一个变量用来存储状态，在路由钩子中进行判断，如果当前变量为空，也就意味着状态还没有进行过获取，在当前情况下进行状态获取（类似于单例）。最终代码：
// permission.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import router from './router'
import { useUserStore } from './store/user'
let userStore: any = null
router.beforeEach(async(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
if (userStore === null) {
userStore = useUserStore()
}
// TODO 判断是否登录
if (userStore.name) {
...
}
})以上就是vue3 pinia踩坑及解决方案详解的详细内容，更多关于vue3 pinia踩坑解决的资料请关注脚本之家其它相关文章！
相关文章
目前前端三大框架(vue、react、angular)中vue是前端工程师经常使用的,在使用之前需要搭建vue开发环境,这篇文章主要给大家介绍了关于Win11&Win10配置vue开发环境的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要给大家介绍了关于element的表单组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了vue使用file-saver本地文件导出,大家需要安装xlsx和file-saver，然后创建localExports.js文件，具体实现代码跟随小编一起看看吧2022-01-01
这篇文章主要介绍了vue 封装面包屑组件教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章给大家分享了Vue实例以及生命周期的相关知识点内容，有兴趣的朋友们可以学习下。2018-08-08
关于vue-router的beforeEach无限循环的问题解决
本篇文章主要介绍了关于vue-router的beforeEach无限循环的问题解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本文主要介绍了vue 封装导出Excel数据的公共函数，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue3中使用vuedraggable拖拽实战教程,文中通过示例介绍了vue3拖拽组件vuedraggable的使用demo，需要的朋友可以参考下2023-06-06
这篇文章主要给大家分享的是Vue组件传值的几种常用方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
最新评论