vuex的store在刷新后数据被清空

vuex在页面刷新后，store就会被重置，数据清空。解决方法：在监听到页面刷新时将数据保存到缓存中，再次加载页面时先从缓存中获取即可。

实现方法一：在app.vue中添加如下代码：

// 在页面加载时读取localStorage里的状态信息
if (localStorage.getItem('store')) {
  this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem('store'))));
}
// 在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener('pagehide', () => {
  localStorage.setItem('store', JSON.stringify(this.$store.state));
});
// 在登录和注销界面增加
//localStorage.removeItem('store');

使用该方法，我再权限控制的文件permission.js中的路由判断中还是获取数据为空

router.beforeEach(async(to, from, next) => {
     const hasGetUserInfo = store.getters.name  //此时获取的name在刷新后为空
     if (hasGetUserInfo) {
       next()
     } else {
       next(`/login?redirect=${to.path}`)
       NProgress.done()
     }
}

于是，修改了如下方法二，成功实现：

实现方法二：使用vuex-persist组件

• 安装：

npm install --save vuex-persist
or
yarn add vuex-persist

• 在store/index.js中引入：

import VuexPersistence from 'vuex-persist'

//使用vuex-persist插件解决页面刷新后store为空的问题
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

//在new Vuex.Store中引入进插件
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters,
  plugins: [vuexLocal.plugin]  //添加引入插件代码
})

vuex 页面刷新时store数据丢失问题
Vuex持久化存储之vuex-persist