VUE3 ------入门（vuex和Axios）

VUE3 ------入门

文章目录

• VUE3 ------入门
• 前言
• 一、如何实现vuex的持久化 ？
• 二、在Axios封装中的那些事儿 ......
• 三. 怎么理解逻辑复用 ？

---

前言

一、如何实现vuex的持久化 ？

不用插件

1. 成功获取token 一式两份 一份存入vuex 一份存入本地ls cookie
2. vuex中state初始化的时候 优先从本地取

    state:{
      token: getItem('token') || ''
    }

使用插件

1. 安装一个插件
2. vuex plugins

  plugins:[
    注册插件
  ]
// 在响应式数据变化的时候进行自动化同步到本地

二、在Axios封装中的那些事儿 …

1.实例化

// 1.实例化  
//(1).baseURL   接口根路径   (2).timeout   接口最长时间
const instance = axios.create({
  baseURL: '....',
  timeout: 5000
})

2.请求拦截器

在vue3 中请求拦截器，支持多个,后面结果为前面的参数,前面的结果为最后结果
注意：Bearer后面有一个空格

// instance.interceptors.request.use(config => {
//   return config
// }, e => Promise.reject(e))
instance.interceptors.request.use(config => {
  // 1. 获取token
  const { token } = store.state.user.profile
  // 2. 请求头设置token
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
}, e => Promise.reject(e))

3.响应拦截器

在vue3 中响应拦截器，支持多个,前面结果为后面的参数,后面的结果为最后结果

1. token失效 401

// 处理返回数据 token失效跳回到登录页
instance.interceptors.response.use(
 // 200-300
(response)=>{
   return response
 },
 // 其余码
 (error) => {
   return Promise.reject(error)
 }
)

instance.interceptors.response.use(res => res.data, e => {
  if (e.response && e.response.status === 401) {
    const redirectUrl = encodeURIComponent(router.currentRoute.value.fullPath)
    router.push('/login?redirectUrl=' + redirectUrl)
  }
  return Promise.reject(e)
})

3. 接口不按照常规状态码返回的时候可以自定义容错
   200 - 300 成功 否则 失败

三. 怎么理解逻辑复用 ？

响应式数据以及操作数据的行为方法的一个可以重复使用的组合