vue.js - Vuex 数据渲染的问题
问题描述
我正在使用 nuxt 和 store 的模块模式研究 vuex 的反应性。问题是,尽管存储中的所有数据都已通过操作 => 突变成功更改,但它们不会出现在页面上,并且仅显示存储数组的空新元素。这是我的文件:
商店>联系人>index.js:
let initialData = [
{
id: 1,
name: 'Michael',
email: 'michael.s@mail.com',
message: 'message from Michael'
},
{
id: 2,
name: 'Mark',
email: 'mark.sh@email.com',
message: 'message from Mark'
},
{
id: 3,
name: 'Valery',
email: 'valery.sh@mail.com',
message: 'message from Valery'
}
]
const state = () =>{
return {
contacts: []
}
}
const getters = {
allContacts (state) {
return state.contacts
}
}
const actions = {
async initializeData({ commit }) {
commit('setData', initialData)
},
addNewContact({ commit, state }, newContact) {
commit('addContact', newContact)
}
}
const mutations = {
setData: (state, contacts) => (state.contacts = contacts),
addContact: (state, newContact) => state.contacts.push(newContact)
}
export default { state, getters, mutations, actions}
组件本身:
<template>
<div class="contact-form">
<div class="links">
<nuxt-link to="/">home</nuxt-link>
<nuxt-link to="/contact-form">contact form</nuxt-link>
</div>
<h1>leave your contacts and message here:</h1>
<div class="input-wrapper">
<form class="feedback-form" action="">
<div class="name">
<label for="recipient-name" class="col-form-label">Ваше имя:</label>
<input type="text" id="recipient-name" v-model="obj.userName" name="name" class="form-control" placeholder="Представьтесь, пожалуйста">
</div>
<div class="form-group">
<label for="recipient-mail" class="col-form-label">Ваш email:</label>
<input type="email" v-model="obj.userEmail" name="email" id="recipient-mail" class="form-control" placeholder="example@mail.ru">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Сообщение:</label>
<textarea name="message" v-model="obj.userMessage" id="message-text" class="form-control"></textarea>
</div>
<button @click.prevent="addToStore()" type="submit">submit</button>
</form>
</div>
<h3>list of contacts</h3>
<div class="contacts-list">
<div class="list-element" v-for="contact in allContacts" :key="contact.id">
id: {{contact.id}} <br> name: {{contact.name}}<br/> email: {{contact.email}}<br/> message: {{contact.message}}
</div>
</div>
</div>
</template>
<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
export default {
data() {
return {
obj: {
userName: '',
userEmail: '',
userMessage: ''
}
}
},
mounted() {
console.log(this.showGetters)
},
created() {
this.initializeData()
},
methods: {
...mapActions({
initializeData: 'contacts/initializeData',
addNewContact: 'contacts/addNewContact'
}),
addToStore() {
this.addNewContact(this.obj)
},
},
computed: {
...mapGetters({
allContacts: 'contacts/allContacts',
}),
showGetters () {
return this.allContacts
}
},
}
</script>
那么,任何人都可以帮助理解,有什么问题吗?
解决方案
您的字段名称不匹配。
在里面obj
你叫他们userName
,userEmail
和userMessage
。对于您呼叫的所有其他联系人name
,email
并且message
。
如果需要,您可以使用不同的名称,但在某个地方您必须将一个映射到另一个,以便它们在数组中都是相同的。
您应该能够通过 Vue Devtools 确认这一点。前 3 个联系人的字段与新添加的联系人不同。
推荐阅读
- amazon-web-services - AWS API 中的 POST 在测试 POST 时出现 400 错误
- c++ - 基类中删除的构造函数会影响子类吗?
- flowtype - 无法扩展导入的类
- git - 如何将 Jenkins 上的 SSH 用户私有传递给可用于 git pull 的 .sh 文件
- tensorflow - 使用 ssd_inception_v2_coco 训练了一个模型,接下来我该怎么做?
- node.js - 电报机器人:按钮文本不可读
- jmeter - Jmeter - 使用参数但不使用正文发送请求很好
- arrays - Yii2 ArrayHelper::map() 格式日期
- excel - 将单元格复制并粘贴到过滤器框vba中
- postgresql - PGError:错误:运算符不存在:数字=布尔