记录Vue3中使用pinia可能遇到的问题及解决方法-编程知识

记录Vue3中使用pinia可能遇到的问题及解决方法

news/2025/2/9 8:20:49/文章来源:https://www.cnblogs.com/xiaozhu007/p/18581952

1.在安装依赖时容易停留pinia，附带持久化插件使用的地址

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

方法：请按照以下步骤：

删除 C:\Users账户中的 .npmrc 文件
在命令提示符里执行 npm cache verify
在命令提示符里执行 npm config set registry https://registry.npmmirror.com 切换淘宝源
之后再次执行 npm i 即可。

2. Pinia-构建用户仓库和持久化

1.安装插件为了让持久化，在终端输入pnpm add pinia-plugin-persistedstate -D

2.使用main.js ,离pinia近的地方导入import persist from 'pinia-plugin-persistedstate'

app.use(createPinia().use(persist))

3.配置stores/user.js

{persist: true}

涉及到了pinia单独拿出来放在store项目下的index.js文件夹，通常我们会在store下面创一个module文件，专门放那些库，方便在App.vue中导入写一大串，我们将index.js文件当成整个module文件夹的出口，然后在这个index.js文件夹中类似（export * from './modules/user'//接收user模块所有的按需导出）

3. 安装axios

yarn add axios

import axios from 'axios'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenreturn config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据return res},(err) => {// TODO 5. 处理401错误return Promise.reject(err)}
)export default instance

完整代码

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间
  baseURL,timeout: 10000
})
//请求拦截器
instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst useStore = useUserStore()if (useStore.token) {config.headers.Authorization = useStore.token}return config},(err) => Promise.reject(err)
)
//响应拦截器
instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据if (res.data.code == 0) {return res}//处理业务失败,给错误提示，并且抛出错误ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {// TODO 5. 处理401错误//错误的特殊情况=》401权限不足，token过期if (err.response?.statue == 401) {router.push('/login')}ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)export default instance
export { baseURL }