🤔 Как обрабатываются значения формы в vuex?

Для обработки значений формы в Vuex (состоянии управления в приложениях Vue) нужно выполнить следующие шаги:

1⃣Создание формы в компоненте Vue
Создайте компонент с формой, который будет использоваться для ввода данных.

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="name">Имя:</label>
      <input type="text" id="name" v-model="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />

      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    handleSubmit() {
      this.$store.dispatch('submitForm', {
        name: this.name,
        email: this.email
      });
    }
  }
};
</script>

2⃣Создание состояний, мутаций и действий в Vuex
Создайте состояние для хранения данных формы, мутации для обновления состояния и действия для обработки отправки формы.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    formData: {
      name: '',
      email: ''
    }
  },
  mutations: {
    SET_FORM_DATA(state, payload) {
      state.formData = payload;
    }
  },
  actions: {
    submitForm({ commit }, formData) {
      // Здесь вы можете выполнить любые асинхронные операции, такие как отправка данных на сервер
      // Например, с использованием axios:
      // axios.post('/api/form', formData).then(response => {
      //   console.log(response.data);
      // });

      commit('SET_FORM_DATA', formData);
    }
  }
});

3⃣Связать значения формы с состоянием Vuex
Вы можете использовать mapState и mapMutations для связывания состояния и мутаций Vuex с вашим компонентом.

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="name">Имя:</label>
      <input type="text" id="name" v-model="localName" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="localEmail" />

      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      name: state => state.formData.name,
      email: state => state.formData.email
    }),
    localName: {
      get() {
        return this.name;
      },
      set(value) {
        this.updateForm({ name: value, email: this.email });
      }
    },
    localEmail: {
      get() {
        return this.email;
      },
      set(value) {
        this.updateForm({ name: this.name, email: value });
      }
    }
  },
  methods: {
    ...mapActions(['submitForm']),
    handleSubmit() {
      this.submitForm({
        name: this.localName,
        email: this.localEmail
      });
    },
    updateForm(payload) {
      this.$store.commit('SET_FORM_DATA', payload);
    }
  }
};
</script>

4⃣Отправить данные из формы в Vuex и обновить состояние
Когда пользователь отправляет форму, данные формы отправляются в Vuex с помощью действия submitForm, которое обновляет состояние через мутацию SET_FORM_DATA.

Ставь 👍 и забирай 📚 Базу знаний