解决vuex由于刷新页面，vuex内数据重置问题

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    userInfo: {}
  },
  mutations: {
    // 重新赋值
    removeState(state){
      if(localStorage.getItem('userInfo')){
        state.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        localStorage.removeItem('userInfo')
      }
    },
    // 保存state 用户敏感信息
    saveState(state){
      localStorage.setItem('userInfo',JSON.stringify(state.userInfo))
    },
    setUserInfo(state, msg) {
      state.userInfo = {
        ...state.userInfo,
        ...msg
      }
    },
    // 清除用户信息
    clearLoginInfo(state){
      state.userInfo = {}
    },
  },
  actions: {},
  modules: {}
});

下面在src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import store from "../store";
//引入nprogress
import NProgress from "nprogress"; // 进度条
import "nprogress/nprogress.css"; //这个样式必须引入
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "视口",
    redirect: "/home",
    component: () => import("@/views/index.vue"),
    children: [
      {
        path: "/home",
        name: "表格",
        component: () => import("@/views/page/home/home.vue")
      },
      {
        path: "/about",
        name: "关于",
        component: () => import("@/views/page/about/about.vue")
      }
    ]
  },
  {
    path: "/login",
    name: "登录",
    component: () => import("@/views/login.vue")
  },
  {
    path: "*",
    name: "page not fond",
    component: () => import("@/views/404.vue")
  }
];
const router = new VueRouter({
  routes
});
var messageInstance = null;
router.beforeEach((to, from, next) => {
  NProgress.start();
  // 去登录页，下面不需要执行
  if (to.path === "/login") {
    NProgress.done();
    return next();
  }
  if (!store.state.userInfo.username) {
    NProgress.done();
    //没有登录，去跳转登录页
    if (to.path === "/login") {
      return next();
    } else {
      if (messageInstance) {
        messageInstance.close();
      }
      messageInstance = Vue.prototype.$message.error("未登录，请先登录");
      return next({ path: "/login" });
    }
  } else {
    next();
  }
});
router.afterEach(() => {
  NProgress.done();
});
//提交保存vuex的state
store.commit('removeState')
//监听页面关闭事件，去存localStorage内
window.onbeforeunload=function (e){
  store.commit('saveState')
}
export default router;

核心代码就是

store.commit('removeState')
window.onbeforeunload=function (e){
  store.commit('saveState')
}

原理就是监听页面关闭，在关闭时去存localStorage，页面加载的时候去存入state，之后再删除localStorage的敏感数据，需要注意的是，在逻辑业务中，退出，和切换用户操作需要清空state的用户信息数据