解决 mpvue 经典 bug:同路由切换时,上次的数据会保留

小讴
关注前端小讴,阅读更多原创技术文章

由于一直在用vue技术栈,因此初次开发小程序尝试使用【mpvue】。尽管听闻框架已停止维护,为了上手迅速,不顾可能存在的众多bug,毅然用起来。

果不其然,一个大bug出现了同一路由切换时,上一次的页面数据会保留

项目实战bug:mpvue重构cnode社区
image

github用户已在mpvue的issues给出相关原因:
image

参考众多答案后,用“建页面栈”的办法得以解决

const dataStack = []; // 建一个页面栈

export default {
  data () {
    return {...};
  },
  onLoad () {
    dataStack.push({ ...this.$data }); // 备份数据
    // 其他初始化....一定要先备份,再做其他初始化
  },
  onUnload () {
    Object.assign(this.$data, dataStack.pop()); // 恢复数据
  }
}

由于 vue 的 mixin 中的代码先于页面执行,因此上述方法可优化到 mixin.js 文件中

let mixin = {
  data() {
    return {
      dataStack: [], // 解决mpvue相同组件数据不更新问题,建立栈堆
    };
  },
  onUnload() {
    Object.assign(this.$data, this.dataStack.pop()); // 恢复
  },
  onLoad() {
    this.dataStack.push({ ...JSON.parse(JSON.stringify(this.$data)) }); // 备份
  },
};
export default mixin;

bug得以解决:
image

功能和项目完整代码参见simon-cnode(mpvue重构cnode社区),欢迎star!

阅读 273

从前做策划、半路出家的前端程序猿,爱吉他爱户外爱篮球更爱写代码,努力为了更好的生活。大家可添加我微信(powerful_simon),互相交流互相学习,一起弹琴唱歌打球爬山。同时还望前辈们多多指点,多多帮忙内推~

167 声望
6 粉丝
0 条评论
你知道吗?

从前做策划、半路出家的前端程序猿,爱吉他爱户外爱篮球更爱写代码,努力为了更好的生活。大家可添加我微信(powerful_simon),互相交流互相学习,一起弹琴唱歌打球爬山。同时还望前辈们多多指点,多多帮忙内推~

167 声望
6 粉丝
宣传栏