将多个表单输入绑定到vuex存储数组

// store/formModule.js

const state = {
  formData: [] // 存储表单数据的数组
}

const mutations = {
  SET_FORM_DATA(state, data) {
    state.formData = data;
  },
  ADD_FORM_DATA(state, data) {
    state.formData.push(data);
  },
  REMOVE_FORM_DATA(state, index) {
    state.formData.splice(index, 1);
  },
  UPDATE_FORM_DATA(state, { index, data }) {
    state.formData.splice(index, 1, data);
  }
}

const actions = {
  setFormData({ commit }, data) {
    commit('SET_FORM_DATA', data);
  },
  addFormData({ commit }, data) {
    commit('ADD_FORM_DATA', data);
  },
  removeFormData({ commit }, index) {
    commit('REMOVE_FORM_DATA', index);
  },
  updateFormData({ commit }, { index, data }) {
    commit('UPDATE_FORM_DATA', { index, data });
  }
}

export default {
  state,
  mutations,
  actions
}

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="form.name">
      <input type="text" v-model="form.email">
      <button type="submit">Submit</button>
    </form>
    <div v-for="(data, index) in formData" :key="index">
      <p>Name: {{ data.name }}</p>
      <p>Email: {{ data.email }}</p>
      <button @click="removeData(index)">Remove</button>
    </div>
  </div>
</template>

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

export default {
  computed: {
    ...mapState('formModule', ['formData'])
  },
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    ...mapActions('formModule', ['addFormData', 'removeFormData']),
    submitForm() {
      this.addFormData(this.form);
      this.form.name = '';
      this.form.email = '';
    },
    removeData(index) {
      this.removeFormData(index);
    }
  }
}
</script>

// main.js

import Vue from 'vue';
import Vuex from 'vuex';
import formModule from './store/formModule';
import App from './App.vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    formModule
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');