解决刷新页面Vuex数据丢失问题

我们使用 Vue 和 Vuex 的时候，当我们刷新页面的时候， Vuex 里的数据就会恢复为初始状态，要想解决这个问题，实现 Vuex 数据的持久化

自己实现

我们可以在刷新页面之前将数据存储到sessionStorage、localStorage、cookie里面，然后我们进入页面之前从sessionStorage、localStorage、cookie里面读取数据保存到 Vuex 里即可，具体的代码如下：

,如果用户退出浏览器，则sessionStorage里面的数据就消失了，而localStorage里的数据除非你自己手动清除，否则一直存在，而 cookie 一般是有时效性的，而且 cookie 里面可以存储的数据大小有限，最多只能储存4KB的数据

个人建议储存在sessionStorage里面会更好

// APP.vueexport default {name: 'App',created() {const oldStore = sessionStorage.getItem('store')// 第一次进入页面时为null，后面如果刷新页面将会有值，则会替换Vuex里面的数据if (oldStore !== null) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(oldStore)))}// 监听页面刷新，将store里面的数据保存到sessionStoragewindow.addEventListener('beforeunload', () => {sessionStorage.setItem('store', JSON.stringify(this.$store.state))})},}

使用插件

你可以使用 vuex-persistedstate 这个插件，本质的原理也是使用了本地的储存，也可以分别存储在 cookie , sessionStorage , localStorage 里面