How make reactive object in a store

Question

i am using vue3 with options api

as shown in the code posted below, i am creating a store composed of label, dateAvailabilityFrom and dateAvailabilityTo as shown in the reactive object state. what i am trying to achieve is, to replace the following:

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

with something similtar to:

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

i want the obj to be reactive and composed of the aforementioned attributes, so that i can do something similar to the following:

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;
    },
},

is that possible? how can i achieve that please

code

<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

i solved it as follows:

code

<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>