Vuetify折叠面板：用sessionStorage存状态，避免触发watch监听器

开发者阿泽

2026-8-18

解决方法

核心思路是给组件加一个初始化完成的标记，只在用户手动操作面板时才触发sessionStorage存储，避免初始化阶段的赋值触发监听。

步骤1：添加初始化状态标记

在组件的data中新增一个isInitialized变量，初始值设为false：

data() {
  return {
    panel: this.expand ? [0] : [1],
    isInitialized: false // 新增初始化完成标记
  }
}

步骤2：完成初始化后更新标记

在mounted钩子的最后，将isInitialized设为true，表示组件初始化流程结束，后续的panel变化都属于用户手动操作：

mounted: function () {
  this.getTimesheetsKpis();
  if (sessionStorage.getItem("analyticsSession") !== null) {
    var analyticsSession = JSON.parse(
      sessionStorage.getItem("analyticsSession")
    );
    var currentDate = moment(new Date());
    var sessionDate = analyticsSession.date;

    var duration = moment.duration(currentDate.diff(sessionDate));
    var hours = duration.asHours();
    console.log("hours", hours);
    var secs = duration.asSeconds();
    console.log("secs", secs);

    if (secs > 45 /* hours >= 12 */) {
      console.log("session expired");
      sessionStorage.removeItem("analyticsSession");
    } else {
      this.panel = analyticsSession.panel;
    }
  }
  // 新增：初始化完成后更新标记
  this.isInitialized = true;
},

步骤3：修改watch监听器的触发条件

更新watch的handler，只有当isInitialized为true，且面板状态确实发生变化时，才执行存储操作。同时修正原代码中错误的判断逻辑（oldVal.length !== newVal是笔误，应该对比数组长度）：

watch: {
  panel: {
    handler(newVal, oldVal){
      console.log(oldVal.length, newVal.length)
      // 仅在初始化完成且状态真的变化时触发存储
      if(this.isInitialized && oldVal.length !== newVal.length){
        console.log("panel watcher", newVal, oldVal);
        this.setSessionStorage();
      }
    }
  },
}