vuex配合本地Cookies数据持久化

下载js-cookie
一个简单，轻量级的JavaScript API，用于处理浏览器cookie。cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息，比如当前已经登录过的状态、登录以后的用户信息等等

yarn add js-cookie --S

src/utils/auth.js

// 专门用来操作cookie的方法包
// 内部封装了繁琐的操作方法 参数处理 暴露三个函数 get,set,remove
import Cookies from 'js-cookie'//引入

const TokenKey = 'hr_token'

// 获取token的方法
export function getToken() {
  return Cookies.get(TokenKey)
}

// 设置方法
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

// 删除方法
export function removeToken() {
  return Cookies.remove(TokenKey)
}

使用
src/store/modules/user.js

import { setToken, getToken, removeToken } from '@/utils/auth'

state: () => ({
    // 先从本地取
    token: getToken() || '',
    userInfo: {}
  }),
  mutations: {
    setToken(state, token) {
      // 存入vuex
      state.token = token
      // 存入本地
      setToken(token)
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // 清除用户数据的方法
    removeUserInfo(state) {
      state.token = ''
      state.userInfo = {}
      removeToken()
      // 重置路由
      resetRouter()
    }
  },