问题场景

离开本页签时（即点击其他页签时），存储查询数据。导致 bug：首次打开页签，或者点击浏览器按钮刷新时后，页面上的输入框输入后，会出现无法输入、延迟显示、输入卡顿。

代码如下：

  /* === initDataMixin.js === */
  beforeRouteLeave(to, from, next) {
    // 跳转路由之前，存储滚动条位置
    this.$store.dispatch("queryData/changeQuery", {
      key: "scrollY",
      value: {
        [from.path]: window.scrollY,
      },
    });
    // 离开本页签时（即点击其他页签时），存储查询数据
    this.saveQueryParamsFn();
    next();
  },
  methods: {
    // 保存查询参数
    saveQueryParamsFn() {
      this.$store.dispatch("queryData/changeQuery", {
        key: "queryParams",
        value: {
          [this.path]: this.queryParams,
        },
      });
    },
  },

修改

改为：发送查询请求后，存储查询数据。上述 bug 消失。

代码如下：

  /* === initDataMixin.js === */
  beforeRouteLeave(to, from, next) {
    // 跳转路由之前，存储滚动条位置
    this.$store.dispatch("queryData/changeQuery", {
      key: "scrollY",
      value: {
        [from.path]: window.scrollY,
      },
    });
    next();
  },
  methods: {
    // 保存查询参数  // initData() 方法末尾（即发送查询请求后调用），存储查询数据
    saveQueryParamsFn() {
      this.$store.dispatch("queryData/changeQuery", {
        key: "queryParams",
        value: {
          [this.path]: this.queryParams,
        },
      });
    },
  },

/* === 使用 initDataMixin 的 vue 页面  === */
methods: {
    // 根据 initDataMixin，必须要有 initData()
    initData() {
      this.loadPage();
    },
    // 加载页面
    loadPage() {
      // 请求查询接口数据
      // ……
      // 存储查询参数
      this.saveQueryParamsFn();
    },
}