Как правильно сбросить реактивные значения Vue Composition Api

Мне интересно, как мне сбросить реактивность в настройке vuejs? (я знаю, если изменить его на ref и использовать view.value, чтобы решить эту проблему, но должен быть ответ на это для использования реактивного)

введите описание изображения здесь


typescript javascript vuejs3 vue-composition-api
person SeyyedKhandon    schedule 13.04.2020    source источник
comment
Вы в этом разобрались? Тоже ищу это.   -  person InfoStatus    schedule 17.04.2020
comment
@InfoStatus еще нет, но вы можете проголосовать за вопрос, чтобы дать ему больше возможностей быть увиденным другими, поэтому мы наконец получили ответ   -  person SeyyedKhandon    schedule 17.04.2020
comment
Будьте осторожны, у вас есть конфликты имен с вашими переменными и именами типов. Переменные должны иметь camelCased, чтобы отделить их от ваших типов PascalCased.   -  person nook    schedule 27.04.2020

Ответы (3)


arrow_upward
18
arrow_downward

Вы можете использовать Object.assign:

  setup() {
    const initialState = {
      name: "",
      lastName: "",
      email: ""
    };

    const form = reactive({ ...initialState });

    function resetForm() {
      Object.assign(form, initialState);
    }

    function setForm() {
      Object.assign(form, {
        name: "John",
        lastName: "Doe",
        email: "[email protected]"
      });
    }

    return { form, setForm, resetForm };
  }

Смотрите в прямом эфире на codeandbox < / а>

кредиты: взято отсюда

person roli roli    schedule 29.04.2020
comment
это типичный способ, и я хотел бы найти лучший ответ на эту проблему, но, как они сказали ответ в vue-next github. кажется, лучшего ответа пока нет. спасибо, что уделили этому время???? - person SeyyedKhandon; 02.05.2020

arrow_upward
1
arrow_downward

Цитата с официального сервера Vueland Discord:

"Насколько я знаю, реактивность - это старый способ, который мы используем для выполнения реактивности из классического API, поэтому для сброса значений необходимо примерно следующее:"

const myData = reactive({
  foo: true,
  bar: ''
})

function resetValues () {
 myData.foo = true
 myData.bar = ''
}

Следовательно, если вы не меняете свойства, вы сможете использовать Object.assign(). (Поправьте меня если я ошибаюсь)

person nook    schedule 27.04.2020

arrow_upward
1
arrow_downward

Object.assign у меня не сработало. (Может быть, потому, что я использовал прокладку для Composition API в Nuxtjs 2?) Для тех, кто столкнулся с той же проблемой: мне пришлось использовать компактный цикл.

  setup() {
    const initialState = {
      name: "",
      lastName: "",
      email: ""
    };

    const form = reactive({ ...initialState });

    function resetForm() {
        for (const [key, value] of Object.entries(initialState)) {
          form[key] = value
        }
    }

    function setForm(values = {name: "John", lastName: "Doe", email: "[email protected]"}) {
        // only loop with the supported keys of initial state
        for (const key of Object.keys(initialState)) {
          form[key] = values[key]
        }
    }

    return { form, setForm, resetForm };
  }
person Markus Madeja    schedule 15.02.2021
comment
Как я могу сбросить массив при использовании активного обертывания? - person JackChouMine; 30.03.2021