一、将用户信息存在vuex和localstorage中

1.存在localstorage中，实现自动登录

(1)往localstorage中存数据次数多，可以封装一个工具函数
  1. /**
  2.  * 存数据
  3.  * 取数据
  4.  * 删除数据
  5.  */
  7. export function addItem(key, val) {
  8.   /**
  9.    * 基本类型数据
  10.    * 引用数据类型
  11.    */
  12.   if (typeof val === 'object') {
  13.     val = JSON.stringify(val)
  14.   }
  15.   localStorage.setItem(key, val)
  16. }
  18. export function getItem(key) {
  19.   /**
  20.    * 获取基本数据类型字符串
  21.    * 获取转换后的引用类型
  22.    */
  23.   const data = localStorage.getItem(key)
  24.   try {
  25.     return JSON.parse(data)
  26.   } catch {
  27.     return data
  28.   }
  29. }
  31. export function removeItem(key) {
  32.   localStorage.removeItem(key)
  33. }
  35. export function removeAllData(key) {
  36.   localStorage.clear()
  37. }

(2)触发action，获取到token后，提交mutation

a.在mutation里面保存vuex，也保存localstorage

b.设置localstorage时，使用常量，创建常量文件夹保存常量
  1. export const TOKEN = 'token'

(3)为了实现自动登录，vuex中的token初始值应该为从localstorage中获取
  1.   state: () => ({
  2.     token: getItem(TOKEN)
  3.   }),

2.存在vuex中