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

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. 携带token
    return 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. 携带token
    const 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 }

 以上pinia和axios关联搭建框架完毕。可以自行验证是否能正常访问和读取数据