vuex刷新页面后如何解决丢失store的数据问题
作者：harold1024
这篇文章主要介绍了vuex刷新页面后如何解决丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vuex刷新页面后丢失store的数据
提出问题
最近遇到个问题，vue中vuex中的store数据，会在页面刷新后初始化，为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage，至于为何用他，因为页面关闭后他会被清空，localStorage则会一直存在，cookie又太小，因此sessionStorage最合适。
解决方案
在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
在beforeunload方法中将store.state存储到sessionstorage中。
export default {
name: 'app',
created () {
// 在页面加载时读取sessionStorage
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
}
// 在页面刷新时将store保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
}
}vuex刷新页面数据丢失（数据持久化）
前提：
为什么要让vuex数据持久化：
在使用vuex的时候，会发现刷新页面之后state中存储的数据会被重置，因为刷新浏览器的时候会导致整个页面重新加载，vuex的state也会全部重新加载，所以为了防止这类情况的发生，我们会将vuex中的数据进行本地存储，防止页面刷新丢失vuex中的数据。
存储到localStorage中
首先安装vuex-persistedstate
npm install vuex-persistedstate -S
vuex-persistedstate默认存储到localStorage，使用如下：
在store文件夹下面的index.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
plugins: [createPersistedState()],
})存储到sessionStorage中
使用vuex-persistedstate存储到sessionStorage，如下：
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage
})],
})指定数据持久化
使用vuex-persistedstate指定需要持久化的state数据，如下：
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage,
// 方法1：用reducer，这里的val是由store里面的所有state，不加reducer为储存所有，reducer为指定存储
reducer(val) {
return {
// 只储存state中的name
keyName: val.name
}
}
// 方法2：用paths,数组里面填模块名，存储指定模块
// paths: ['Home', 'Order']
})]
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。