时间戳

首页 > 解决方案 > 如何在合成 api 中设置步骤形式？

vue.js - 如何在合成 api 中设置步骤形式？

问题描述

我正在尝试使用组合 api 创建一个多步骤表单。在 vue 2 中，我曾经这样做过

    email: {
                get() {
                    return this.$store.state.email
                },
                set(value) {
                    this.$store.commit("setEmail", value)
                }
            },

现在我有了自己的商店，我将这个计算属性传递给我的组件stEmail: computed(() => state.email)。我如何在设置中实际使用它？

我正在尝试做这样的事情，但完全不起作用。


  let setMail = computed(({
    get() {
      return stEmail;
    },
    set(val) {
      stEmail.value = val;
    }
  }))

const state = reactive({
  email: "",
})


export function useGlobal() {

  return {
    ...toRefs(state),
    number,
  }
}

还是现在有更好的方法来制作多步表格？

标签： vue.jsvuejs3

解决方案

您可以对 Composition API 执行相同的操作。useStore从vuex包和computed从导入vue：

import { computed } from 'vue';
import { useStore } from 'vuex';

然后在你的setup()函数中使用它，如下所示：

setup: () => {
  const store = useStore();

  const email = computed(() => ({
    get() {
      return store.state.email;
    },
    set(value) {
      store.commit("setEmail", value);
    }
  });

  return { email };
}

如果你想避免使用vuex，你可以定义变量ref()并将它们导出到一个常规的 JavaScript 文件中。这将使您的状态可在多个文件中重用。

state.js

export const email = ref('initial@value');

Form1.vue/Form2.vue

<template>
  <input v-model="email" />
</template>

<script>
import { email } from './state';

export default {
  setup() {
    return { email };
  }
};
</script>

推荐阅读