背景

vuex的数据，是存储在内存中的，浏览器F5会清除内存，重新加载js等文件，vue项目重新载入，数据就会被初始化，也就是丢失。

解决思路

（1）在浏览器刷新时，把vuex数据存储在本地缓存中，比如localstorage或sessionStorage;读取数据时，将本地缓存赋值给vuex。

在根组件app.vue，created钩子中设置

     //刷新时 根组件执行created函数 此时把缓存数据复制给vuex
     if (sessionStorage.getItem("store")) {
       this.$store.replaceState(
         Object.assign(
           {},
           this.$store.state,
           JSON.parse(sessionStorage.getItem("store"))
         )
       );
     }

     //在页面刷新时将vuex里的信息保存到sessionStorage里 
     window.addEventListener("beforeunload", () => {
       sessionStorage.setItem("store", JSON.stringify(this.$store.state));
     });

参考：blog.csdn.net/weixin_4240…

关于Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。

  Object.assign(target, ...sources)
  参数：  target--->目标对象
         source--->源对象
  返回值：target，即目标对象

在页面加载时读取sessionStorage里的状态信息 合入复制到vuex里面

Object.assign()拷贝的是属性值，如果源对象的属性值是一个指向对象的指针，那也只拷贝那个指针。 所以如果对象的属性值为基础类型，对于通过Object.assign()拷贝的那个属性而言是深拷贝； 如果对象的属性值为引用，对于通过通过Object.assign()拷贝的那个属性而言其实是浅拷贝的。

(2)使用插件 vuex-persistedstate

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

安装插件

npm install vuex-persistedstate -D
//-D 就是 -dev --save

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex);
export default new Vuex.Store({
  // 默认存储到localStorage
  plugins: [createPersistedState()],
  
  // 想要存储到sessionStorage，配置如下
  //   plugins: [createPersistedState({
  //     storage: window.sessionStorage
  // })],

  // 只储存state中的dataTest
  //   plugins:[createPersistedState({
  //   storage: window.sessionStorage,
  //   reducer(val) { //val是state所有值
  //     return {
  //       dataTest: val.dataTest
  //     }
  //   }
  // })],
  state: {
     dataTest: 'abc',
    dataTest2:'efg'
    },
  mutations: {},
  actions: {},
  modules: {}
});

devtools可以看到 Local Storage 存储了一个vuex键值对，值就是state对象。

仓库地址 github.com/xuhongg/van…
首页点击persistedstate按钮 进入调试页