前端项目，使用vuex作为状态存储，但是遇到一个问题，就是在刷新页面时出现了丢失token的问题，下面给出完美的解答：

1.可以使用缓存将vuex中的state缓存起来，可以使用localStorage和sessionStorage。cookie不适合存储。
localStorage是长期存储，sessionStorage是会话期间存储，这里使用sessionStorage.
在这里插入图片描述

2.上代码
App.vue中添加 mounted()和methods，在刷新的时候进行持久化。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',

  /**
   * 当页面刷新时vuex存储的数据会消失，因此一般使用sessionStorage处理
   */
  mounted() {
    window.addEventListener('unload', this.saveState);
  },
  methods: {
    saveState() {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state));
    }
  },
}
</script>

在state初始化的时候，去sessionStorage中寻找token等相关参数。
上代码：

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

// 改写state, 防止出现刷新页面之后丢失state，需要对state进行格式化：JSON.parse()
const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')).user : getDefaultState();

console.log("state: ", state);

const mutations = {
    RESET_STATE: (state) => {
        Object.assign(state, getDefaultState())
    },
    SET_TOKEN: (state, token) => {
        state.token = token
    },
    SET_NAME: (state, name) => {
        state.name = name
    },
    SET_AVATAR: (state, avatar) => {
        state.avatar = avatar
    }
}