vue.js 如何使React对象在一个商店

cidc1ykv  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(132)

我正在使用vue3options api
如下面发布的代码所示,我正在创建一个由labeldateAvailabilityFromdateAvailabilityTo组成的store,如reactive对象state所示。我试图实现的是,替换以下内容:

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

字符串
类似于:

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


我希望objreactive,并由上述属性组成,这样我就可以做类似于下面的事情:

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>

bn31dyow

bn31dyow1#

我是这样解决的:

验证码

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

字符串

相关问题