Vue项目 - vuex状态缓存方式之createPersistedState 存储token

原因

在使用vue开发项目的时候，我们经常会利用vuex来进行全局的状态管理从而达到实现数据全局共享的目的，但是使用vuex有一个缺点就是在页面刷新之后数据会消失从而使页面展示异常或者请求接口报错，比如用户在登录成功后，我们会从后台拿到用户的token，或者uid等信息，因为大部分的接口都需要用户的token传给后台来进行鉴权处理，因为用户刷新页面是不可控的因素，这个时候我们就要结合本地存储来保证数据的存储。

1、手动利用HTML5的本地存储API

存储数据第一反应就是前端开发常见的localStorage或sessionStorage，cookie等存储方式，具体的使用方式就是在在mutations定义的方法里对state需要存储的数据的状态操作的同时对存储也做对应的增删改查操作。
这样state就会和存储一起存在并且与vuex同步，保证用户在刷新后数据不会消失，这样只适合简单数据的存储缓存。

const state = () => {
  return {
    token: ''
  }
}
const actions = {
  async login ({ commit }, param) {
    // 在这里获取用户的登录信息，返回值包含token，uid等信息
    const userInfo = await userService.login(param)
    commit('setUser', userInfo)
    return userInfo
  }
}
const mutations = {
  setUser (state, data) {
    state.token = data.token
    // 在这里获取用户token, 同步存储数据
    localStorage.setItem('user-token', data.token)
  }
}

2.使用createPersistedState插件来实现数据存储

createPersistedState插件的本质还是使用同样的web开发常见的几种存储方式，其特点就是结合了存储方式,在入口统一配置就不需要每次都手动写存储方法。

npm install --save vuex-persistedstate

在store入口index.js文件中引入并进行对应配置

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
});