Vuex и обработка форм, как не обновлять состояние до нажатия кнопки отправки - PullRequest
Новая
       11

Vuex и обработка форм, как не обновлять состояние до нажатия кнопки отправки

0 голосов
/ 16 июня 2020

Я пытаюсь создать форму, которая отображает данные из хранилища Vuex, что позволяет пользователю обновлять поля формы, а затем нажимать кнопку «Отправить», когда все будет готово.

До сих пор я видел только учебники, использующие v-модель с вычисленными get() и set() для считывания значений из хранилища и последующего их обновления.

Но я хотел бы интуитивно позволить пользователю изменить форму, а затем решить либо обновить, либо Отмена. Отмена приведет к сбросу формы по существу к исходным значениям состояния.

Пока все, что я выяснил, это метод v-модели, который не идеален, поскольку он распространяет данные везде, где используется значение состояния. Таким образом, это может повлиять на logi c, хотя этого не должно быть до тех пор, пока пользователь не нажмет submit 

<v-text-field v-model="displayName"></v-text-field>

...

computed: {
...mapGetters(['currentUser']),
    displayName: {
        get() {
            return this.currentUser.name
        },
        set(value) {
            this.$store.dispatch('updateName', value);
        },
    },
}

Я просто не могу понять, как показать текущее состояние, но также и в Vue способ обновления состояние только при нажатии кнопки. Есть ли для этого хороший учебник?

Грязная идея пусть он обновляет временное состояние, а при нажатии кнопки submit он принимает временное состояние и также обновляет фактическое состояние как распространить его в базу данных?

Следовал этому руководству https://medium.com/js-dojo/maintaining-a-single-source-of-truth-while-handling-form-data-with-vuex-426e86d16642

1 Ответ

1 голос
/ 16 июня 2020

Как вы предлагаете в конце сообщения, вы можете сохранить состояние формы локально. Когда компонент загружается, извлеките данные из магазина и скопируйте их в локальное состояние. Когда пользователь нажимает «Сохранить», вы можете отправить действие, чтобы сделать запрос API и обновить хранилище.

Вы также можете выбрать маршрут, указанный в вашем комментарии, но затем, если пользователь решит отказаться от своего редактирования, вы потребуется перезагрузить исходные значения с сервера.

...