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

Question

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

我在维尤没有什么经验。

请帮帮我。

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

Answer 1

下面是一个工作代码https://codesandbox.io/embed/naughty-chatterjee-6susb?fontsize=14&隐藏导航=1&主题=深色

首先，您必须使用突变来修改状态值。第二，在提交表单值之前，可以使用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

以下是工作代码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>

Answer 3

您将从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>

表格.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]
}
}
});