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-router路由的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了vue 检测用户上传图片宽高的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Vue-cli3生成的Vue项目加载Mxgraph方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
Vue数据双向绑定原理：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新2022-08-08
vue中的<template>标签与react中的<></>标签区别详解
这篇文章主要为大家介绍了vue中的<template>标签与react中的<></>标签区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文总结了在Vue2项目中使用element-ui的el-table组件在弹窗中展示数据,并实现基础的勾选功能,内容包括如何设置row-key、使用reserve-selection属性、修改数据获取函数以支持跨页勾选以及如何在关闭弹窗时清理selection,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要给大家介绍了关于vue3实现监听store中state状态变化的简单方法,store是一个状态管理工具,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了vue中使用element-ui进行表单验证的实例代码，本文给大家分享实现思路，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
关于Element-ui中el-table出现的表格错位问题解决
使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于Element-ui中el-table出现的表格错位问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论