Vue3项目从0-1项目（手把手教学）

npm i vuex-persistedstate
或
yarn add vuex-persistedstate

// 用户模块
export default {
  namespaced: true,
  state () {
    return {
      setUser: {
      }
    }
  },
  mutations: {
    setUser (state, setUser) {
      state.setUser = setUser
    }
  }
}

// 分类模块
export default {
  namespaced: true,
  state () {
    return {
      database: []
    }
  }
}

import { createStore } from 'vuex'
// 引入持久化插件
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import database from './modules/database'
export default createStore({
  modules: {
    user,
    database
  },
  plugins: [
    createPersistedstate({
      key: 'haihaina', // 存储的名字
      paths: ['user', 'database'] // 持久化的模块
    })
  ]
})

npm i axios
或
yarn add axios

// 1. 创建一个新的axios实例
import axios from 'axios'
// 导出基准地址
export const baseURL = '公司项目的地址'
const instance = axios.create({
  // axios 的一些配置，baseURL  timeout
  baseURL,
  timeout: 5000
})
instance.interceptors.request.use(config => {
  return config
}, err => {
  return Promise.reject(err)
})
// 2. 响应拦截器：2.1. 剥离无效数据  2.2. 处理token失效
instance.interceptors.response.use(
  // res => res.data  取出data数据，将来调用接口的时候直接拿到的就是后台的数据
  res => res.data,
  err => {
    return Promise.reject(err)
  })
// 3. 导出一个函数，调用当前的axsio实例发请求，返回值promise
// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}