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实现放大缩小拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家介绍了vue封装form表单组件拒绝重复写form表单的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了vue实现可拖拽div大小的方法,可封装为全局方法在项目中所需要地方直接调用（mixins），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue中element 的上传功能的实现思路,本文大概通过两种实现思路，具体内容详情大家跟随脚本之家小编一起看看吧2018-07-07
本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用，防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下2021-11-11
本篇文章主要主要介绍了Vue的MVVM实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Vue3如何解决Element-plus不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue-cli4项目开启eslint保存时自动格式的问题小结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论