接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080

演示地址：http://cba.itlike.com/public/mweb//

21. vuex持久化处理

1. 新建 utils/storage.js 封装方法

const INFO_KEY = 'hm_shopping_info'

// 获取个人信息
export const getInfo = () => {
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : {
    token: '',
    userId: ''
  }
}

// 设置个人信息
export const setInfo = (info) => {
  localStorage.setItem(INFO_KEY, JSON.stringify(info))
}

// 移除个人信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)

1. vuex user 模块持久化处理

import { getInfo, setInfo } from '@/utils/storage'
export default {
  namespaced: true,
  state () {
    return {
      userInfo: getInfo()
    }
  },
  mutations: {
    setUserInfo (state, obj) {
      state.userInfo = obj
      setInfo(obj)
    }
  },
  actions: {}
}

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)

22. 优化：添加请求 loading 效果

1. 请求时，打开 loading

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  Toast.loading({
    message: '请求中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0
  })
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)

1. 响应时，关闭 loading

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status !== 200) {
    Toast(res.message)
    return Promise.reject(res.message)
  } else {
    // 清除 loading 中的效果
    Toast.clear()
  }
  // 对响应数据做点什么
  return res
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)