iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3pinia踩坑及解决方案详解
  • 211
分享到

vue3pinia踩坑及解决方案详解

vue3pinia踩坑vue3pinia 2023-03-06 11:03:48 211人浏览 泡泡鱼
摘要

目录安装用法1、Cannot access 'useUserStore' before initialization重现步骤问题原因解决方案安装 yarn add

安装

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踩坑解决的资料请关注编程网其它相关文章!

--结束END--

本文标题: vue3pinia踩坑及解决方案详解

本文链接: https://www.lsjlt.com/news/198620.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作