vue刷新浏览器后，存在全局getters的数据丢失

1、问题描述：vue项目登陆后，将用户相关信息存在getters中，然后在项目中取getters中的username显示在右上角。

登陆进入后，显示没问题

浏览器直接刷新后：

2、问题分析

const login = {
  state: {
    tokens: '',
    username: '',
    roles: []
  },
  mutations: {
    [LOGIN_IN](state, data) {
      if (data) {
        state.tokens = data.toke
        state.username = data.username
      }
    },
    [LOGIN_OUT](state) {
      state.tokens = ''
    },
    [USER_INFO] (state, data) {
      if (data) {
        state.tokens = data.toke
        state.username = data.username
      }
    }
  },
  actions: {
    login({commit, state}, user) {
      tokens.getTokens(user.username, user.password).then((data) => {
        //success
        commit(LOGIN_IN, data.data)
        // setToken(data.data.toke)
      }, (error) => {
        //fail
        commit(LOGIN_IN, '')
        // removeToken()
      })
    },
    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getUserLoginInfo(getToken()).then(response => {
          const data = response.data
          commit(USER_INFO, data)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    logout({commit}) {
      commit(LOGIN_OUT)
      // removeToken()
    }
  }
}

//export
export default login

可以看出来，登陆成功后，执行了

state.tokens = data.toke
state.username = data.username

将token和username放在了state 的 login.tokens  和 login.username 中。

这时在导航页面需要显示用户姓名：

data() {
  return {
    username: this.$store.state.login.username
  }
},

也是就上文所说，通过登陆的方式，导航页面用户名显示正常

但是页面刷新了后，vue 从新加载了，但是登陆页面并没有重新加载（因为之前token放在cookie中，所以并没有重定向到登录页），所以$store.state.login.username并没有赋值，取到的也就是空

3、解决办法

将token和username一样，序列化到cookie中

修改地方：src/store/index.js

/**
 * Created by suntao on 2020/2/7.
 */
import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import createPersistedState from 'vuex-persistedstate' //vuex持久化localstorage插件
import * as Cookies from 'js-cookie';
import * as state from './state'
// import * as mutations from './mutations'
// import * as actions from './actions'
import permission from './modules/permission'
import app from './modules/app'
import getters from './getters'
import menu from './modules/menu'
import login from './modules/login'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

let persistedState = {
  paths: ['login.tokens', 'login.username'],
  getState: (key) => Cookies.getJSON(key),
  setState: (key, state) => Cookies.set(key, state, {expires: 1}) //expires->cookie过期时间，单位为天
}

const store =  new Vuex.Store({
  state,
  getters,
  modules: {
    app,
    permission,
    menu,
    login
  },
  strict: debug,
  plugins: debug ? [createLogger(), createPersistedState(persistedState)] : [createPersistedState(persistedState)]
})

export default store

这样，指定路径下

'login.tokens', 'login.username'

就交由cookie管理。