Блог

Главная - Вопросы по программированию - Как получить набор в composition api для пошаговой формы?

Как получить набор в composition api для пошаговой формы?

#vue.js #vuejs3

#vue.js #vuejs3

Вопрос:

Я пытаюсь создать многоступенчатую форму с помощью composition api. В vue 2 я делал это таким образом

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

Теперь у меня есть собственное хранилище, я создал это вычисляемое свойство для передачи моему компоненту stEmail: computed(() => state.email) . Как я могу на самом деле использовать это в get set?

Я пытаюсь сделать что-то подобное, но полностью не работает.

 
  let setMail = computed(({
    get() {
      return stEmail;
    },
    set(val) {
      stEmail.value = val;
    }
  }))
 
 const state = reactive({
  email: "",
})


export function useGlobal() {

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

Или есть лучший способ сейчас создавать многоступенчатые формы?

Ответ №1:

Вы можете сделать то же самое с 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>

Комментарии:

1. Что такое useGlobal и почему вы создаете свое собственное решение, когда оно есть vuex ?

2. Потому что я не использую vue 2, и все говорят, что vuex ужасен для composition api, потому что comp api позволяет создавать собственные составные файлы.

3. Я добавил пример с общим локальным состоянием без использования vuex .

4. И это все? для этого требуется только v-model? Не исчезнет ли состояние, когда я перейду на следующую страницу?

5. Использование computed(() => ({ с анонимной функцией не сработало для меня, мне пришлось опустить анонимную функцию, чтобы она работала const email = computed({ get() { return store.state.email; }, set(value) { store.commit("setEmail", value); } });

Ответ №2:

Как указал Грегор, принятый ответ включал анонимную функцию, которая, похоже, не работает, но она будет работать, если вы просто избавитесь от этой части. Вот пример использования <script setup> SFC

 <script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

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

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