Vuex页面刷新的数据丢失问题

• 1、问题描述
• 2、解决方案：使用sessionStorage

  在实际项目中，经常会遇到多个组件需要访问同一个数据的情况，且都需要根据数据的变化作出响应，而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下就需要一个全局的状态管理方案-Vuex。
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1、问题描述

Vuex用起来确实很舒服，但是今天碰到了个问题，就是我将JWT和一些权限字符串使用store保存的时候，刷新页面之后这些值就没了，由于我后端集成了SpringSecurity,所以每次请求我都会去验证JWT,如果刷新页面的话，后续请求头中就没有token,就会导致报错。

  初始的配置如下(这里只展示部分代码)：

Login.vue中更新token:

 store.commit('SET_TOKEN',token)

store/index.js配置如下：

import { createStore } from 'vuex'
import router from '@/router'
import qs from 'qs'

export default createStore({
  state: {
    token: ''
  },
  getters: {
    GET_TOKEN: state => {
      return state.token
    }
  },
  mutations: {
    SET_TOKEN: (state, token) => {
       state.token = token
    }
  },
  actions: {
   
  },
  modules: {
  }
})

  刚登录进去还是有值的，如下图：

  刷新页面之后：

2、解决方案：使用sessionStorage

  我们将state的数据保存在localStorage/sessionStorage/Cookie中，这里以sessionStorage为例。

   Vuex中的变量是响应式的，但sessionStorage不是，当我们改变Vuex中的state,组件会检测到改变，但是sessionStorage不会，所以我们让Vuex中的状态从中sessionStorage中得到，这样组件就可以响应式的变化。
   localStorage数据生命周期是永久，不手动清除不会消失，所以不推荐使用

  修改store/index.js配置如下：

import {createStore} from 'vuex'
import router from '@/router'

export default createStore({
    state: {
        token: window.sessionStorage.getItem('token'),  //token
        menuList: window.sessionStorage.getItem("menuList"),//菜单列表
    },
    getters: {
        GET_TOKEN: state => {
            return state.token;
        },
        GET_MENULIST: state => {
            return JSON.parse(state.menuList);
        }
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token=token
            window.sessionStorage.setItem("token", token)
        },
        SET_MENULIST: (state, menuList) => {
            state.menuList=JSON.stringify(menuList)
            window.sessionStorage.setItem("menuList", JSON.stringify(menuList))
        }

    },
    actions: {

    },
    modules: {}
})

这里为了直观，我只留下token和menuList两个state

  重新登录查看Vuex中的state

此时再刷新页面：

  可以看到，数据仍然在，问题解决。
   更多的解决方案有待尝试

• vuex-along
• vuex-persistedstate
• vuex-persist