vuex数据丢失怎么解决

　　vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。 如何解决浏览器刷新数据丢失问题呢?

　　方法一：手动操作本地存储

　　全局监听，页面刷新的时候将 store 里 state 的值存到 sessionStorage 中，然后从sessionStorage 中获取，再赋值给 store ，并移除 sessionStorage 中的数据。在 app.vue 中添加以下代码：

　　created() {

　　window.addEventListener('beforeunload',()=>{

　　sessionStorage.setItem('list', JSON.stringify(this.$store.state))

　　})

　　try{

　　sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('list'))))

　　}catch(err) {

　　console.log(err);

　　}

　　sessionStorage.removeItem("list");

　　}

　　方法二：安装 vuex-persistedstate 插件

　　1. npm install vuex-persistedstate -S //安装插件

　　2. 在 store/index.js 文件中添加以下代码：

　　import persistedState from 'vuex-persistedstate'

　　const store = new Vuex.Store({

　　state:{},

　　getters:{},

　　...

　　plugins: [persistedState()] //添加插件

　　})

　　这时候就需要使用 sessionStorage 进行存储，修改 plugins 中的代码

　　plugins: [

　　persistedState({ storage: window.sessionStorage })

　　]

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。