如何在Qsplitter拖拽或splitterModel等值变更时保存值供应用后续使用？

可以通过监听分割器模型值变化结合**本地存储（或后端接口）**来实现状态保存，下次打开应用时自动恢复上次的拖拽位置，具体方案如下：

方案步骤： #

1. 初始化时读取已保存的状态 #

在setup函数里初始化ref变量时，优先从localStorage读取之前保存的值，没有则用默认的50：

setup() {
  // 读取本地存储的分割器状态，不存在则用默认值50
  const splitterModel = ref(
    localStorage.getItem('splitterModel') ? parseInt(localStorage.getItem('splitterModel')) : 50
  );
  const splitterModel2 = ref(
    localStorage.getItem('splitterModel2') ? parseInt(localStorage.getItem('splitterModel2')) : 50
  );
  const splitterModel3 = ref(
    localStorage.getItem('splitterModel3') ? parseInt(localStorage.getItem('splitterModel3')) : 50
  );

  // 后续代码...
}

2. 监听模型值变化，自动保存 #

使用Vue的watch监听每个分割器模型的变化，一旦值改变就同步保存到localStorage：

import { ref, watch } from 'vue';

setup() {
  // 初始化变量（同上）...

  // 通用保存函数，减少重复代码
  const saveSplitterState = (key, value) => {
    localStorage.setItem(key, value.toString());
  };

  // 监听每个分割器模型的变化
  watch(splitterModel, (newVal) => {
    saveSplitterState('splitterModel', newVal);
  });

  watch(splitterModel2, (newVal) => {
    saveSplitterState('splitterModel2', newVal);
  });

  watch(splitterModel3, (newVal) => {
    saveSplitterState('splitterModel3', newVal);
  });

  return {
    splitterModel,
    splitterModel2,
    splitterModel3
    // 其他返回值...
  };
}

可选：用Qsplitter的原生事件触发保存 #

如果你不想用watch，也可以直接绑定Qsplitter的@move事件（拖拽过程中实时触发）或@update:model-value事件（拖拽结束后触发），比如：

<q-splitter v-model="splitterModel" @update:model-value="(val) => saveSplitterState('splitterModel', val)">
  <!-- 插槽内容 -->
</q-splitter>

扩展说明： #

• 如果需要跨设备同步状态，把localStorage的保存逻辑换成调用后端接口即可，将状态存储到服务器数据库中；
• 如果只需要在当前会话保存，改用sessionStorage替代localStorage，页面关闭后状态会自动清除。

内容的提问来源于stack exchange，提问作者Ballazx