pinia 踩坑 报错:ReferenceError: Cannot access 'useUserStore' before initialization

场景

当我们在前后端分离的项目中,前端就需要封装一个request.js文件来统一封装请求,在请求拦截器和响应拦截器中做一些事情。我用到的是axios。

报错原因

在请求拦截器中,使用pinia存储的token,

ts 复制代码
import axios from 'axios'
import useUserStore from '@/store/user'

const userStore = useUserStore()

// 创建axios实例
const request = axios.create({
  baseURL: 'http://192.168.11.111:4041/api',
  timeout: 3000,
})

// axios请求拦截器
request.interceptors.request.use(
  async (config) => {
    // 配置请求头
    const authorization = userStore.accessToken
    // 验证token
    if (authorization) {
      config.headers.authorization = 'Bearer ' + authorization
    }
    return config
  },
  (e) => Promise.reject(e),
)

// axios响应式拦截器
request.interceptors.response.use(
  (res) => res.data,
  (e) => {
    return Promise.reject(e)
  },
)
export default request

解决方案

Pinia store 依靠 pinia 实例在所有调用中共享同一个 store 实例。大多数时候,只需调用你定义的 useStore() 函数,完全开箱即用。例如,在 setup() 中,你不需要再做任何事情。但在组件之外,情况就有点不同了。 实际上,useStore() 给你的 app 自动注入了 pinia 实例。这意味着,如果 pinia 实例不能自动注入,你必须手动提供给 useStore() 函数。

此时仅需要将 const userStore = useUserStore() 放入 请求拦截器中即可

ts 复制代码
// axios请求拦截器
request.interceptors.request.use(
  async (config) => {
    const userStore = useUserStore()

    // 配置请求头
    const authorization = userStore.accessToken
    // 验证token
    if (authorization) {
      config.headers.authorization = 'Bearer ' + authorization
    }
    return config
  },
  (e) => Promise.reject(e),
)

具体可参考pinia官方文档:pinia.vuejs.org/zh/core-con...

相关推荐
熊的猫42 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书