在Vuex中按下按钮时如何将数据表单插入表格？

Question

我有两个组件叫做 Form.vue 和 Table.vue 我希望在用户填写表单并单击提交按钮时将数据传输到表中。 我知道我在代码中犯了一个错误。

我对vue的经验很少。

请帮帮我。

您可以从此链接查看代码： https://codesandbox.io/s/condescending-matsumoto-w7fui

Answer 1

这是一个工作代码https://codesandbox.io/embed/naughty-chatterjee-6susb?fontsize=14&hidenavigation=1&theme=dark

首先，您必须使用突变来修改状态值。其次，您可以在提交表单值之前使用data 方法存储表单值。

我已经这样修改了你的商店

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    tableData: []
  },
  mutations: {
    addUser(state, payload) {
      console.log(state);
      state.tableData = state.tableData.concat(payload.data);
    }
  },
  actions: {
    addUser({ commit }, payload) {
      commit("addUser", payload);
    }
  }
});

在您的表单中，您必须在表单提交后调度 addUser 操作...

<template>
  <div>
    <form action>
      <div class="form-group">
        <label for="name">نام محصول:</label>
        <input type="text" class="form-control" id="name" placeholder name="name" v-model="name">
      </div>
      <div class="form-group">
        <label for="grouping">دسته بندی:</label>
        <input
          type="text"
          class="form-control"
          id="grouping"
          placeholder
          name="group"
          v-model="category"
        >
      </div>
      <div class="form-group">
        <label class="code">کد محصول:</label>
        <input type="text" class="form-control" id="coding" placeholder name="code" v-model="code">
      </div>
      <div class="form-group">
        <label for="price">قیمت محصول</label>
        <input
          type="text"
          class="form-control"
          id="pricing"
          placeholder
          name="price"
          v-model="price"
        >
      </div>
      <!-- <button type="button" class="btn btn-success send" @click="updateName, updateCategory, updateCode, updatePrice, $store.state.show = true, send">ثبت اطلاعات</button>-->
      <button type="button" class="btn btn-success send" @click.prevent="addUser">ثبت اطلاعات</button>
    </form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      name: "",
      category: "",
      code: "",
      price: ""
    };
  },
  methods: {
    addUser() {
      this.$store.dispatch("addUser", {
        data: {
          name: this.name,
          category: this.category,
          code: this.code,
          price: this.price
        }
      });
    }
  }
};
</script>


<style scoped>
</style>

最后，您必须获取状态 tableData 并迭代表中的项目...

<template>
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>کد</th>
          <th>نام محصول</th>
          <th>دسته</th>
          <th>قیمت</th>
          <th>عملیات</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.code }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button type="button" class="btn btn-primary mt">ویرایش</button>
            <button type="button" class="btn btn-danger mt">حذف</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["tableData"])
  }
};
</script>


<style scoped>
</style>

Answer 2

您正在从store 单独获取表单的值并将其呈现给input。这会导致无法向表中添加行的问题。

让你的store 喜欢

state: {
    formData: {
      name: "",
      category: "",
      code: "",
      price: ""
    },
    show: false
},

Form.vue 脚本

export default {
   data() {
     return { formData: this.$store.getters.formData }
   },
   // rest of the code
}

将表单中的模板v-model绑定更改为formData.name或formData.category。

所以现在addUser 方法将具有以下内容。

this.$store.commit("formData", this.formData);

这将使用提交的数据更新商店。

更新

Form.Vue

<template>
  <div>
    <form>
      <div class="form-group">
        <label for="name">نام محصول:</label>
        <input
          type="text"
          class="form-control"
          id="name"
          placeholder
          name="name"
          v-model="formData.name"
        >
      </div>
      <div class="form-group">
        <label for="grouping">دسته بندی:</label>
        <input
          type="text"
          class="form-control"
          id="grouping"
          placeholder
          name="group"
          v-model="formData.category"
        >
      </div>
      <div class="form-group">
        <label class="code">کد محصول:</label>
        <input
          type="text"
          class="form-control"
          id="coding"
          placeholder
          name="code"
          v-model="formData.code"
        >
      </div>
      <div class="form-group">
        <label for="price">قیمت محصول</label>
        <input
          type="text"
          class="form-control"
          id="pricing"
          placeholder
          name="price"
          v-model="formData.price"
        >
      </div>
      <!-- <button type="button" class="btn btn-success send" @click="updateName, updateCategory, updateCode, updatePrice, $store.state.show = true, send">ثبت اطلاعات</button>-->
      <button
        type="submit"
        class="btn btn-success send"
        @click.prevent="addUser"
      >submit</button>
    </form>
    {{this.$store.getters.fdata}}
  </div>
</template>


<script>

export default {
  
    data(){
       return { formData: {} }
    
  },
  methods: {
    addUser() {
     this.$store.commit('updateFdata', {...this.formData})
    }
  }
};
</script>

Table.vue

<template>
    <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>کد</th>
                            <th>نام محصول</th>
                            <th>دسته</th>
                            <th>قیمت</th>
                            <th>عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(fdata, index) in fData" :key=index>
                            <td>{{ fdata.code }}</td>
                            <td>{{ fdata.name }}</td>
                            <td>{{ fdata.category }}</td>
                            <td>{{ fdata.price }}</td>
                            <td>
                                <button type="button" class="btn btn-primary mt">ویرایش</button>
                                <button type="button" class="btn btn-danger mt">حذف</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
    </div>
</template>


<script>
    import {mapGetters} from 'vuex'
    
    export default {
        computed: mapGetters(['fData'])
    }
</script>

Store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    formData: {
      name: "",
      category: "",
      code: "",
      price: ""
    },
    show: false,
    fData: []
  },
  getters: {
    fData: state => state.fData
  },
  mutations: {
    updateFdata: (state, payload) => {
      state.fData = [ ...state.fData, payload]
    }
  }
});

Answer 3

这是工作代码https://codesandbox.io/s/goofy-grass-c1ysg

您的方法正确，您的大部分代码是正确的，请修改您的 Form.vue 如下以在您的商店中调度操作。

<template>
<div>
<form action>
  <div class="form-group">
    <label for="name">نام محصول:</label>
    <input type="text" class="form-control" id="name" placeholder name="name" v-model="name">
  </div>
  <div class="form-group">
    <label for="grouping">دسته بندی:</label>
    <input type="text" class="form-control" id="grouping" placeholder name="group" v-model="category">
  </div>
  <div class="form-group">
    <label class="code">کد محصول:</label>
    <input type="text" class="form-control" id="coding" placeholder name="code" v-model="code">
  </div>
  <div class="form-group">
    <label for="price">قیمت محصول</label>
    <input type="text" class="form-control" id="pricing" placeholder name="price" v-model="price">
  </div>
  <button type="button" class="btn btn-success send"  @click.prevent="addUser">ثبت اطلاعات</button>
</form>
</div>
</template>
<script>
export default {
data(){ return {  name: '',  category: '',  code: '',  price: '', }  },
methods: {
 addUser() { 
     this.$store.dispatch('updateName', this.name)  
     this.$store.dispatch('updateCategory', this.category)  
     this.$store.dispatch('updateCode', this.code)  
     this.$store.dispatch('updatePrice', this.price)  
 }, 

}
};
</script>
<style scoped>
</style>