首页 > 代码库 > 页面刷新vuex数据消失问题解决方案

页面刷新vuex数据消失问题解决方案

2024-10-15 04:37:02   216人阅读

VBox持续进行中，哀家苦啊，有没有谁给个star。

vuex是vue用于数据存储的，和redux充当同样的角色。

最近在VBox开发的时候遇到的问题，页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。

网上搜，大家的方案都是把数据转移到 localStorage或者其他持久化存储（例如indexDB）。

这倒是可以，我在设计之初因为匆忙，没有考虑周全，这下好，然不成每个 mutation都去存一下。

这个弄的我很不开心，周六在公司，本来就困的要死，又想不到合理的解决方案，昏昏沉沉睡着了。

醒了后，最初想采用 柯里化和高级函数来解决这个问题，很可惜，没有正解。

最小化修改，又不想动现有代码，代理二字最为不过。记得上次我写IBook之初，也用Proxy来拦截修改，同时存数据到磁盘文件。

没错方案就是 ES6的Proxy，尝试之后，确实是可以的。

源码地址：https://github.com/xiangwenhu/vbox/tree/master/src/utils

 

这里有两个问题

1. 初始值的问题。

2. 我要可以配置哪些字段需要持久化，store里面的数据，不代表我都需要持久化。

 

首先解决是 localStorage存储的问题，因为需要转换字符串，简单封装一个 LStorage.js，当然你也可以用 https://github.com/tsironis/lockr或者你喜欢的，小轮子我就自己写了。

const ls = window.localStorage// https://github.com/tsironis/lockrexport default {  getItem(key) {    try {      return JSON.parse(ls.getItem(key))    } catch (err) {      return null    }  },  setItem(key, val) {    ls.setItem(key, JSON.stringify(val))  },  clear() {    ls.clear()  },  keys() {    return ls.keys()  },  removeItem(key) {    ls.removeItem(key)  }}

其次就是代理的简单封装，LSproxy.js

这个版本还是有问题的，现在只能代理二级属性，对现在的我而言已经是够用了的。

createHanlder 创建二级属性的代理

copy 复制对象，当然你可以写更加兼容优雅的方法

proxy  创建state的代理

import LStorage from ‘./LStorage‘/** * 代理二级属性 * @param {*} lsKey 存在localStorage的key * @param {*} pk    一级属性的key */function createHanlder(lsKey, pk) {  return {    set: function (target, key, value, receiver) {      let item = LStorage.getItem(lsKey)      if (item && item[pk]) {        item[pk][key] = value        LStorage.setItem(lsKey, item)      }      return Reflect.set(target, key, value, receiver)    }  }}/** * 仅仅存需要存放的数据 * @param {*} source  * @param {*} keys  */function copy(source, keys = []) {  if (!source) {    return source  }  let d = Object.create(null)  keys.forEach(k => { d[k] = source[k] })  return d}/** * 代理state * @param {*} initState 初始化的值 * @param {*} lsKey  localStorage的key * @param {*} keys   需要存储的键 */const proxy = function (initState, lsKey, keys = []) {  let ks = keys, obj = Object.assign({}, initState, LStorage.getItem(lsKey))  // 代理二级属性  keys.forEach(k => {    obj[k] = new Proxy(obj[k], createHanlder(lsKey, k))  })  // 存入合并的值  LStorage.setItem(lsKey, copy(obj, keys))  return new Proxy(obj, {    set: function (target, key, value, receiver) {      ks.indexOf(key) >= 0 && LStorage.setItem(lsKey, copy(target, keys))      return Reflect.set(target, key, value, receiver)    }  })}export { proxy }

调用这边，基本就没有什么变化, 就多了一句  state = proxy(state, ‘playing‘, [‘list‘])

import { proxy } from ‘../utils/LSProxy‘let state = {  list: [],  current: null}state = proxy(state, ‘playing‘, [‘list‘])const mutations = {  /**   * 添加歌曲   * @param {*} state    * @param {*} song 歌曲信息    */  addSong(state, song) {    let index = state.list.findIndex(s => s.songmid === song.songmid)    if (index < 0) {      state.list.push(song)    }  },  /**   * 添加歌曲   * @param {*} state  内置   * @param {*} songs  歌曲列表   */  addSongs(state, songs) {    let index = -1    songs.forEach(song => {      index = state.list.findIndex(s => s.songmid === song.songmid)      if (index < 0) {        state.list.push(song)      }    })  },  /**   * 删除歌曲   * @param {*} state    * @param {*} songmid  歌曲媒体id    */  removeSong(state, songmid) {    let index = state.list.findIndex(s => s.songmid === songmid)    index >= 0 && state.list.splice(index, 1)  },  /**   * 批量删除歌曲   * @param {*} state    * @param {*} songmids 歌曲媒体列表    */  removeSongs(state, songmids = []) {    let index = -1    songmids.forEach(songmid => {      index = state.list.findIndex(s => s.songmid === songmid)      index >= 0 && state.list.splice(index, 1)    })  },  /**   * 播放下一首，   * @param {*} state    * @param {*} song 为空   */  next(state, song) {    // 如果song不为空，表示是插放，（前提是已经添加到playing）    if (song) {      let index = state.list.findIndex(s => s.songmid === song.songmid)      if (index >= 0) {        state.current = state.list[index]        return      }      return    }    // 如果current为空，表示没有播放的歌曲    if (!state.current && state.list && state.list.length > 0) {      state.current = state.list[0]      return    }    // 如果不是插放，并且current不为空    if (!song && state.current) {      // 播放的歌曲是不是在当前的列表      let index = state.list.findIndex(s => s.songmid === state.current.songmid)      // 如果在歌曲列表里面，接着播放下首      if (index >= 0) {        state.current = (index === state.list.length - 1 ? state.list[0] : state.list[index + 1])      } else {        state.current = state.list[0]      }    }  }}export default {  namespaced: true,  state,  mutations}

 

这种方案的缺点也是很明显的，

1. 代码只能代理二级，对我一般情况应该是够用了，扁平化state

2. 代理二级属性和数组，要是属性平凡修改的时候，代理是会重复触发的，比如，添加30首歌曲的时候，是发生了30次存储。 当然我觉得也是有方案可以优化的。

 

优点我觉得是，

1. state的数据与localStorage的同步过程分离开

2. 对现有代码的注入是相当少的。

 

不知道各位大神有什么好的方法，可以分享出来。

 

参考文章：

解决VUEX刷新的时候出现数据消失

页面刷新vuex数据消失问题解决方案


联系
我们