VUEX数据持久化，防止刷新丢失

1. 通常在vue项目中使用vuex做全局的状态管理，但是刷新之后，vuex中的数据会丢失，这是因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值。
2. 为了防止刷新数据丢失，我们可以将一些数据保存在localstorage、sessionstorage或cookie中，可以保证页面刷新数据不丢失且易于读取。

解决方式

我们可以使用vuex-persistedstate将数据存入到sessionstorage或者localstorage

1. 首先我们将插件下载到我们的项目之中

npm install vuex-persistedstate --save

2. 然后将插件引入到我们的vuex中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
	//......
	//这中间是你的数据和代码
  plugins: [createPersistedState()]
})

在不进行其他设置的情况下，默认是将数据存储在localstorage中的

3. 将数据存储到sessionstorage中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
	//......
	//这中间是你的数据和代码
  plugins: [createPersistedState({
		storage: window.sessionStorage
	})]
})

这样我们在vuex中存储的数据刷新就不会消失了。

但是这种情况是将vuex中存储的所有数据都保存了下来，我们可以尽享选择性的保存

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
	//......
	//这中间是你的数据和代码
  plugins: [createPersistedState({
		storage: window.sessionStorage,
		reducer(val) {
          return {
          // 只储存state中的username
          username: val.username
        }
     }
	})]
})

但是这样还会遇到一种情况，数据存储在sessionstorage中用户时可以看到并修改的。这样会涉及到安全问题，为了解决这种情况我们可以在main.js中加入以下代码，从而防止用户修改数据

window.addEventListener('storage', function (e) {
  sessionStorage.setItem(e.key,e.oldValue)
});