vuex刷新数据丢失的解决办法 |
您所在的位置：网站首页 › vuex刷新数据丢失怎么处理 › vuex刷新数据丢失的解决办法 |
vuex刷新数据丢失的解决办法
|
通常在vue项目中使用vuex做全局的状态管理，但是刷新之后，vuex中的数据会丢失 因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值 通常将一些数据保存在localstorage、sessionstorage或cookie中，可以保证页面刷新数据不丢失且易于读取。 vue项目一般操作都在同一个页面跳转路由，所以使用sessionstorage进行存储
1.vue项目刷新，app.vue会重新加载，在created中获取之前保存过的数据，使用vuex.store的replaceState方法，替换store的根状态 2.在浏览器刷新前将store中的数据保存在sessionstorage created(){ if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store")))) } window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) }改变store中的数据，并刷新
也可以直接使用vuex-persistedstate来保存状态(保存在localstorage) npm install --save vuex-persistedstate在store.js中添加两行配置 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ //... plugins: [createPersistedState()] })
|
【本文地址】