Vue3 Options API中如何在Store内创建嵌套式Reactive对象

当然可行，只需把原state的属性嵌套到一个子对象中，依托Vue的reactive特性，嵌套对象本身就具备响应式。下面是具体实现方案：

修改思路 #

• 将原state里的label、dateAvailabilityFrom、dateAvailabilityTo统一放到嵌套对象（比如命名为missionInfo）中
• 新增获取整个嵌套对象的getter，按需保留单个属性的getter
• 调整setters支持修改嵌套对象内的单个属性，也可新增替换整个对象的方法
• 同步更新actions里的初始化逻辑

修改后的完整代码 #

<script>
import { reactive } from 'vue';

export default {
}

export const StoreOnSentinelMissionxxx_xx_xx = ({
  state: reactive({
    // 嵌套的响应式对象
    missionInfo: {
      label: null,
      dateAvailabilityFrom: null,
      dateAvailabilityTo: null,
    }
  }),
  getters: {
    // 获取整个嵌套对象
    getMissionInfo() {
      return StoreOnSentinelMissionxxx_xx_xx.state.missionInfo;
    },
    // 按需保留单个属性的getter
    getLabel() {
      return StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.label;
    },
    getDateAvailabilityFrom() {
      return StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.dateAvailabilityFrom;
    },
    getDateAvailabilityTo() {
      return StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.dateAvailabilityTo;
    },
  },
  setters: {
    // 修改嵌套对象内的单个属性
    setLabel(label) {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.label = label;
    },
    setDateAvailabilityFrom(date) {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.dateAvailabilityFrom = date;
    },
    setDateAvailabilityTo(date) {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.dateAvailabilityTo = date;
    },
    // 可选：直接替换整个嵌套对象（用Object.assign保证响应式不丢失）
    setMissionInfo(newInfo) {
      Object.assign(StoreOnSentinelMissionxxx_xx_xx.state.missionInfo, newInfo);
    },
  },
  actions: {
    // 初始化整个嵌套对象
    initMissionInfo() {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo = {
        label: null,
        dateAvailabilityFrom: null,
        dateAvailabilityTo: null,
      };
    },
    // 按需保留单个属性的初始化方法
    initLabel() {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.label = null;
    },
    initDateAvailabilityFrom() {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.dateAvailabilityFrom = null;
    },
    initDateAvailabilityTo() {
      StoreOnSentinelMissionxxx_xx_xx.state.missionInfo.dateAvailabilityTo = null;
    },
  }
});
</script>

关键说明 #

• Vue的reactive会自动追踪嵌套对象的属性变化，所以missionInfo内部属性的修改会触发响应式更新
• 如果需要替换整个missionInfo，优先用Object.assign合并属性，避免直接赋值导致响应式丢失；若一定要直接赋值，也可以将missionInfo定义为ref对象，但reactive嵌套的方案已经足够满足需求
• 可根据实际业务场景，选择只保留操作整个嵌套对象的getter/setter，删除单个属性的操作方法

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