В Vue Forms with Vuex (Часть 1 из 2) - Сохранение данных формы в Vuex я говорил о том, как я настраивал форму поиска с данными, которые будут сохраняться даже после того, как пользователь покинет страницу. Вы можете получить этот код из Github (v1.0 для части 1). Это было полезно на моей странице поиска и результатов поиска, которую я создавал. Во второй части я рассмотрю следующее препятствие - удаление данных из формы.

Есть два отдельных сценария, которые мне нужно учитывать при очистке моей формы:

  1. Перед отправкой формы и перед сохранением каких-либо данных в хранилище Vuex
  2. После того, как форма была отправлена ​​и данные были сохранены в магазине Vuex.

Мне нужно было учесть оба сценария, потому что каждое решение немного отличается.

Сценарий 1. Очистка данных перед отправкой формы

До того, как моя форма была отправлена, Vuex ничего о ней не знает. Он, конечно же, не знает значений каких-либо полей формы. Это отличная новость, потому что она позволяет легко справиться с данным конкретным сценарием.

Помните созданный мной класс Form.js (эпизоды 19–21 книги Learn Vue 2: Step by Step)? Я могу просто вызвать здесь метод сброса, чтобы очистить нашу форму. Я добавлю в шаблон кнопку очистки и метод под названием resetFilters для обработки события клика:

Search.vue

<template>
  <div id="app">
    <form id="searchForm" @submit.prevent="performFilter">
      <label for="Name">Name: </label>
      <input type="text" id="Name" v-model="form.name">
      <label for="Age">Age: </label>
      <input type="text" id="Age" v-model="form.age">
      <label for="Address">Address: </label>
      <input type="text" id="Address" v-model="form.address">
      <button type="submit">Submit</button>
      <button type="button" @click="resetFilters">Clear</button>
    </form>
  </div>
</template>
<script>
    import { Form } from './Classes/Form'
    export default {
        data: function() {
            return {
                form: new Form()
            }
        },
        computed: {
            searchFilters() {
                return this.$store.state.searchFilters
            }
        },
        mounted() {
            this.form = new Form(this.searchFilters, 'updateSearchFilters')
        },
        methods: {
            performFilter() {
                this.form.submit('get', 'https://jsonplaceholder.typicode.com/users') //just for testing
                    .then(response => {
                        this.$store.commit('updateSearchFilters', this.form)
                    })
            },
            resetFilters() {
                this.form.reset()
           }
        }
    }
</script>

Сценарий 2: очистка данных после отправки формы

После того, как форма была отправлена ​​(и при условии успешного ответа от нашего вызова axios), у нас есть другое состояние, которое следует учитывать при очистке нашей формы. Теперь данные формы, которые мы видим, извлекаются из нашего хранилища vuex. Так что просто вызванный this.form.reset () ничего за нас не сделает. В этом легко убедиться, если вы используете Vue.js DevTools. Вы ИСПОЛЬЗУЕТЕСЬ на Vue.js DevTools, верно ?? 😃

Я не нашел оптимального решения этой проблемы, поэтому, если вы знаете что-то, чего я не знаю, прокомментируйте и дайте мне знать! Мне жаль, что не было метода Vuex для сброса объекта хранилища в его начальное состояние. Не весь магазин, а только объект. Прямо сейчас нет. Итак, мое решение - создать мутацию под названием resetSearchFilters в моем хранилище Vuex, которая будет проходить через мой объект searchFilters и сбрасывать все до пустого. Очевидно, что если у вас есть состояния по умолчанию, отличные от пустого, вам нужно будет учитывать их отдельно. Но вот мой код для этого:

Search.vue

<template>
  <div id="app">
    <form id="searchForm" @submit.prevent="performFilter">
      <label for="Name">Name: </label>
      <input type="text" id="Name" v-model="form.name">
      <label for="Age">Age: </label>
      <input type="text" id="Age" v-model="form.age">
      <label for="Address">Address: </label>
      <input type="text" id="Address" v-model="form.address">
      <button type="submit">Submit</button>     
      <button type="button" @click="resetFilters">Clear</button> 
    </form>
    
  </div>
</template>
<script>
    import { Form } from './Classes/Form'
    export default {
        data: function() {
            return {
                form: new Form()
            }
        },
        computed: {
            searchFilters() {
                return this.$store.state.searchFilters
            }
        },
        mounted() {
            this.form = new Form(this.searchFilters, 'updateSearchFilters')
        },
        methods: {
            performFilter() {
                this.form.submit('get', 'https://jsonplaceholder.typicode.com/users') //just for testing
                    .then(response => {
                        this.$store.commit('updateSearchFilters', this.form)
                    })
            },
            resetFilters () {
             this.$store.commit('resetSearchFilters')
             this.form.reset()
         }
        }
    }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    strict: true,
    state: {
        searchFilters: {
            name: '',
            age: '',
            address: ''
        }
    },
    mutations: {
        updateSearchFilters(state, data) {
            state.searchFilters = data
        },
        resetSearchFilters(state) {
            Object.keys(state.searchFilters).forEach(function (key){
                state.searchFilters[key] = ''
            });
        }
    }
});

И это все! Теперь у меня есть форма, которая может как сохранять данные формы, так и очищать их. Спасибо за чтение, вы можете найти полный код в Github (релиз v2.0 для этой статьи в Части 2)