vuex数据存储到了哪里?vuex刷新数据丢失如何处理?或者有几种方案呢?

VUEX刷新数据丢失问题出在哪里?

其实答案很简单,因为js代码运行在内存中,代码运行时所有的变量和函数都是保存在 内存 中的,但我们 按下F5的时候以前申请的内存将会被释放,并会被重新加载js脚本,变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存可以使用 localStorage 或者 sessionStorage 存储本地数据保证刷新后数据不会丢失。

使用本地存储

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    //  直接使用本地存储的方式
    name: JSON.parse(sessionStorage.getItem('name')) || 'name'
  },
  mutations: {
    set(state, data) {
      //  修改数据的时候直接存到本地
      sessionStorage.setItem('name', JSON.stringify(data))
      state.name = data
    }
  },
})

使用插件方式

下载插件

npm install vuex-persistedstate --save

全局store都是用localStorage存储

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    name: 'name'
  },
  mutations: {
    set(state, data) {
      state.name = data
    }
  }
})

全局store使用sessionstorage存储

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })],
  state: {
    name: 'name'
  },
  mutations: {
    set(state, data) {
      state.name = data
    }
  }
})

存储指定store数据

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState({
    //  存到sessionStorage
    storage: window.sessionStorage,
    //  传入的val是所有的store值
    reducer(val) {
      console.log(val);
      return {
        // 只储存state中的user
        user: val.user
      }
    }
  })],
  state: {
    name: 'name',
    user: "user"
  },
  mutations: {
    set(state, data) {
      state.name = data
    },
    u(state, data) {
      state.user = data
    }
  }
})

页面刷新存储store

export default function (ctx) {
    //离开页面 刷新前 将store中的数据存到session
    window.addEventListener('beforeunload', () => {
        sessionStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
    });
    //页面加载完成  将session中的store数据
    document.addEventListener('DOMContentLoaded', () => {
        let storeCache = sessionStorage.getItem("storeCache")
        if (storeCache) {
            // 将session中的store数据替换到store中
            ctx.store.replaceState(JSON.parse(storeCache));
        }
    });
}
  • 2
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值