vue前端缓存持久化过程中遇到的问题

最新推荐文章于 2025-03-26 11:00:42 发布

垄上

最新推荐文章于 2025-03-26 11:00:42 发布

阅读量486

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_41557284/article/details/127122988

版权

在使用Vuex的持久化插件vuex-persistedstate时，遇到保存Map类型数据的困扰。博客作者通过将Map转换为Object来解决这一问题。在mutations中，创建了一个新的对象并存储了多个pageData属性，然后将该对象存储到state的fullMonthObjMap中，以实现数据的持久化。虽然这种方法绕过了Map的不支持，但可能引入了额外的复杂性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uex 使用vuex-persistedstate 做持久化存储时无法保存 map，这就尴尬了

在javascript 中，object也是一种字典，object 的key 具有唯一性使用object 存储也是可行的

vuex配置持久化插件

const vuexLocal = new VuexPersistence({
  storage:window.localStorage
})
......
  plugins:[vuexLocal.plugin]

state中重新写变量

fullMonthObjMap: {},

mutations中代码

createMonthReportMap(state, monthDate) {
      let obj = {}
      obj.pageOneData = state.pageOneData
      obj.pageTwoData = state.pageTwoData
      obj.pageThreeData = state.pageThreeData
      obj.pageFourData = state.pageFourData
      obj.pageFiveData = state.pageFiveData
      obj.pageSixData = state.pageSixData
      obj.pageSevenData = state.pageSevenData
      obj.pageEightData = state.pageEightData
      obj.pageNineData = state.pageNineData
      obj.pageTenData = state.pageTenData
      obj.pageElevenData = state.pageElevenData
      obj.pageTwelveData = state.pageTwelveData
      obj.pageThirteenData = state.pageThirteenData
      obj.pageFourteenData = state.pageFourteenData
      obj.pageFifteenData = state.pageFifteenData
      obj.pageSixteenData = state.pageSixteenData
      obj.pageSeventeenData = state.pageSeventeenData
      obj.pageEighteenData = state.pageEighteenData

      state.fullMonthObjMap[monthDate] = obj

      console.log("这个字典的语句执行了吗")
    },