Vee Validate 4 验证与 Vuex 3 计算属性

问题描述

我正在尝试按照官方 Vee-Validate 指南 found here 构建多步骤表单向导。虽然这个示例很有帮助，但我想将 Vuex 合并到其中，并且我使用自定义组件而不是 Vee-Validate 默认的 <Form/> 和 <ErrorMessage/> 组件。自定义组件在内部不使用 Vee-Validate 默认组件。

然而，这样做给我带来了一些问题。我目前的问题是我不知道如何让我的 Vuex 状态reactively 进入 Vee-Validate。

我的主要组件中的文本输入是这样使用的：

        <text-input
            label="Name"
            name="name"
            v-model="name"
        />
        ...
    computed: {
      ...mapGetters({
          businessFields: 'business/businessFields',}),name: {
          get () {
              return this.businessFields.name;
          },set (value) {
              this.$store.commit('business/setName',value)
          }
      },},

这都是根据two-way computed property guide that Vuex gives here。

现在我正在尝试将这些字段合并到之前链接的 Vee-Validate 多表单向导中。我基本上已经更改为在重置和从 Vuex 来回而不是本地值时获取值。像这样：

// FormWizard.vue (from the Vee-Validate example adapted to use Vuex)
<template>
  <form @submit="onSubmit">
    <slot />

    <div>
      <button v-if="hasPrevIoUs" type="button" @click="goToPrev">
        PrevIoUs
      </button>
      <button type="submit">{{ isLastStep ? "Submit" : "Next" }}</button>
    </div>
  </form>
</template>

<script>
import { useForm } from "vee-validate";
import { useStore } from 'vuex';
import { ref,computed,provide } from "vue";

export default {
  name: "FormWizard",emits: ["next","submit"],props: {
    validationSchema: {
      type: null,required: true,formDataGetter: {
      type: String,}
  },setup(props,{ emit }) {
    const store = useStore();
    const currentStepIdx = ref(0);

    // Injects the starting step,child <form-steps> will use this to generate their ids
    const stepCounter = ref(0);
    provide("STEP_COUNTER",stepCounter);
    // Inject the live ref of the current index to child components
    // will be used to toggle each form-step visibility
    provide("CURRENT_STEP_INDEX",currentStepIdx);

    // if this is the last step
    const isLastStep = computed(() => {
      return currentStepIdx.value === stepCounter.value - 1;
    });

    // If the `prevIoUs` button should appear
    const hasPrevIoUs = computed(() => {
      return currentStepIdx.value > 0;
    });

    const { resetForm,handleSubmit } = useForm({
      validationSchema: props.validationSchema,});

    // We are using the "submit" handler to progress to next steps
    // and to submit the form if its the last step
    // parent can opt to listen to either events if interested
    const onSubmit = handleSubmit(() => {
      // Sets initial values for the values already filled
      // effectively fills the inputs when clicking on "prevIoUs"
      resetForm({
        values: {
          ...store.getters[props.formDataGetter]
        },});
      if (!isLastStep.value) {
        currentStepIdx.value++;
        emit("next",store.getters[props.formDataGetter]);

        return;
      }

      emit("submit");
    });

    function goToPrev() {
      if (currentStepIdx.value === 0) {
        return;
      }

      currentStepIdx.value--;
    }

    return {
      onSubmit,hasPrevIoUs,isLastStep,goToPrev,};
  },};
</script>

FormStep.vue 步骤完全相同。当我像这样使用 FormWizard 时：

  <form-wizard :validationSchema="validationSchema" @submit="onSubmit" formDataGetter="setup/setupFields">
    <form-step>
      <business-form></business-form>
    </form-step>
  </form-wizard>

在我的主要组件中有一个 setup()，它包含 FormWizard，如下所示：

  setup() {
    const store = useStore();
    // You don't have to validate each step
    // vee-validate will only validate the fields rendered from the schema
    // fields not rendered errors will be ignored,so it all just works!
    const validationSchema = yup.object().shape({
      name: yup.string().required(),});

    /**
     * Only Called when the last step is submitted
     */
    const onSubmit = (values) => {
      console.log(values);
      alert(store.getters['business/businessFields'].name);
    };

    return {
      validationSchema,onSubmit,

现在的情况是，当我进入下一页时，我收到一个验证错误，要求输入名称。这是因为没有使用 Vee-Validate 的 useField() 函数来容纳我的字段。 useField() 返回一个计算属性，您必须将其作为 v-model 链接到您的输入。这里出现的问题是，当我使用 useField() 时我无法更改 Vuex 字段，并且我无法使用 Vuex 的计算属性更改 useField，因为这不是 Vee-Validate 中的选项。

现在我的问题是：如何以一种方式实现 Vee-validate 3 和 Vuex 4，以便仅使用一个计算属性更新我的 Vuex 存储和我的 Vee-Validate useForm() 字段？

或者对此有不同的方法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）