如何在商店中制作响应式对象

Question

我正在使用

vue3

和

options api

如下面发布的代码所示，我正在创建一个由

store

、

label

和

dateAvailabilityFrom

组成的

dateAvailabilityTo

，如

reactive

对象

state

所示。 我想要实现的是替换以下内容：

state: reactive({
    label: null,
    dateAvailabilityFrom: null,
    dateAvailabilityTo:null,
}),

与类似的东西：

state: reactive({
    obj: {
        label: null,
        dateAvailabilityFrom: null,
        dateAvailabilityTo:null,
    }
}),

我希望

obj

为

reactive

并由上述属性组成，以便我可以执行类似于以下操作的操作：

setters: {
    setlabel(label) {
        StoreOnSentinelMissionxxx_xx_xx.state.obj.label = label;
    },
    setDataAvailabilityFrom(dateAvailabilityFrom) {
      StoreOnSentinelMissionxxx_xx_xx.state.obj.dateAvailabilityFrom = dateAvailabilityFrom;
    },
    setDataAvailabilityTo(dateAvailabilityTo) {
      StoreOnSentinelMissionxxx_xx_xx.state.obj.dateAvailabilityTo = dateAvailabilityTo;
    },
},


getters: {
    getObj() {
      return StoreOnSentinelMissionxxx_xx_xx.state.obj;
    },
},

这可能吗？我怎样才能做到这一点

代码

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

    export default {
      }

    export const StoreOnSentinelMissionxxx_xx_xx = ({
      state: reactive({
        label: null,
        dateAvailabilityFrom: null,
        dateAvailabilityTo:null,
      }),
      getters: {
        getlabel() {
          return StoreOnSentinelMissionxxx_xx_xx.state.label;
        },
        getDataAvailabilityFrom() {
          return StoreOnSentinelMissionxxx_xx_xx.state.dateAvailabilityFrom;
        },
        getDataAvailabilityTo() {
          return StoreOnSentinelMissionxxx_xx_xx.state.dateAvailabilityTo;
        },
      },
      setters: {
        setlabel(label) {
            StoreOnSentinelMissionxxx_xx_xx.state.label = label;
        },
        setDataAvailabilityFrom(dateAvailabilityFrom) {
          StoreOnSentinelMissionxxx_xx_xx.state.dateAvailabilityFrom = dateAvailabilityFrom;
        },
        setDataAvailabilityTo(dateAvailabilityTo) {
          StoreOnSentinelMissionxxx_xx_xx.state.dateAvailabilityTo = dateAvailabilityTo;
        },
      },
      actions: {
        initLabel() {
            StoreOnSentinelMissionxxx_xx_xx.state.label = null;
        },
        initSateAvailabilityFrom() {
            StoreOnSentinelMissionxxx_xx_xx.state.dateAvailabilityFrom = null;
        },
        initDateAvailabilityTo() {
            StoreOnSentinelMissionxxx_xx_xx.state.dateAvailabilityTo = null;
        },
      }
    });
</script>

Answer 1

我解决如下：

代码

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

    export default {
      }

    export const StoreOnSentinelMissionxxx_xx_xx = ({
        s: reactive({
            state: reactive({
                label: null,
                dateAvailabilityFrom: null,
                dateAvailabilityTo: null,
            }),
        }),
      getters: {
        getState() {
            return StoreOnSentinelMissionxxx_xx_xx.s.state;
        },
        getLabel() {
          return StoreOnSentinelMissionxxx_xx_xx.s.state.label;
        },
        getDataAvailabilityFrom() {
          return StoreOnSentinelMissionxxx_xx_xx.s.state.dateAvailabilityFrom;
        },
        getDataAvailabilityTo() {
          return StoreOnSentinelMissionxxx_xx_xx.s.state.dateAvailabilityTo;
        },
      },
      setters: {
        setState(state) {
            StoreOnSentinelMissionxxx_xx_xx.s.state = state;
        },
        setLabel(label) {
            StoreOnSentinelMissionxxx_xx_xx.s.state.label = label;
        },
        setDataAvailabilityFrom(dateAvailabilityFrom) {
          StoreOnSentinelMissionxxx_xx_xx.s.state.dateAvailabilityFrom = dateAvailabilityFrom;
        },
        setDataAvailabilityTo(dateAvailabilityTo) {
          StoreOnSentinelMissionxxx_xx_xx.s.state.dateAvailabilityTo = dateAvailabilityTo;
        },
      },
      actions: {
        initLabel() {
            StoreOnSentinelMissionxxx_xx_xx.s.state.label = null;
        },
        initSateAvailabilityFrom() {
            StoreOnSentinelMissionxxx_xx_xx.s.state.dateAvailabilityFrom = null;
        },
        initDateAvailabilityTo() {
            StoreOnSentinelMissionxxx_xx_xx.s.state.dateAvailabilityTo = null;
        },
      }
    });
</script>