vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex刷新页面后丢失store数据

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']
    })]
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文