下面是对"vue3 pinia踩坑及解决实例代码分析"的重写： "解析vue3 pinia，包括踩坑与解决方法，结合实例代码进行分析。"-Vue.js-PHP中文网

下面是对"vue3 pinia踩坑及解决实例代码分析"的重写： "解析vue3 pinia，包括踩坑与解决方法，结合实例代码进行分析。"

WBOY

发布： 2023-05-10 08:37:09

转载

2195人浏览过

安装

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()

登录后复制

使用中出现的问题

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，包括踩坑与解决方法，结合实例代码进行分析。"的详细内容，更多请关注php中文网其它相关文章！