为什么说刷新页面vuex的数据会丢失
刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了。
解决办法?
方法一:
将state的数据保存在localstorage,sessionstorage或cookie中。
在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
在beforeunload方法中将store.state存储到sessionstorage中。
export default {name: 'app',created () {// 在页面加载时读取sessionStorageif (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-persistedstate,可以自动存储。
下载:
npm install --save vuex-persistedstate
使用:
在store.js中引入import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({//配置plugins: [createPersistedState()]})
默认的是存储到localStorage里的,我们也可以存到sessionStorage中,如:
import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({//配置plugins: [createPersistedState({storage: window.sessionStorage})]})