Vue.js Vuex数据渲染的问题

我正在使用nuxt和存储模块模式研究vuex的反应性。问题是，尽管actions=>translations成功地更改了存储区中的所有数据，但它们不会出现在页面上，只显示存储区数组的空新元素。这是我的档案：

存储>联系人>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>

家
联系方式
请在此处留下您的联系人和信息：
Ваше имя:
bаааа电子邮件：
Сообщение:
提交
联系人名单
id:{contact.id}}
名称：{{contact.name}
电子邮件：{{contact.email}}
邮件：{{contact.message}
从“vuex”导入{mapTranslations，mapGetter，mapActions}
导出默认值{
数据（）{
返回{
obj：{
用户名：“”，
用户电子邮件：“”，
用户消息：“”
}
}
},
安装的（）{
console.log（this.showGetters）
},
创建（）{
this.initializeData（）
},
方法：{
…映射操作({
initializeData:“联系人/initializeData”，
addNewContact:“联系人/addNewContact”
}),
addToStore（）{
this.addNewContact（this.obj）
},
},
计算：{
…地图绘制者({
所有联系人：“联系人/所有联系人”，
}),
表演者（）{
把这个还给我。所有联系人
}
},
}

---

那么，有谁能帮我理解一下，出了什么问题吗？

您的字段名不匹配

在

obj

内部，您调用了他们

userName

，

userEmail

和

userMessage

。对于您呼叫过的所有其他联系人，

name

、

email

和

message

如果需要，您可以使用不同的名称，但在某些地方，您必须将一个名称映射到另一个名称，以便它们在数组中都是相同的

---

您应该能够通过Vue Devtools确认这一点。前3个联系人的字段与新添加的联系人不同。

您的字段名不匹配

在

obj

内部，您调用了他们

userName

，

userEmail

和

userMessage

。对于您呼叫过的所有其他联系人，

name

、

email

和

message

如果需要，您可以使用不同的名称，但在某些地方，您必须将一个名称映射到另一个名称，以便它们在数组中都是相同的

---

您应该能够通过Vue Devtools确认这一点。前3个联系人的字段与新添加的联系人的字段不同。

我知道，所有数据更改都是成功的，因为vue dev tools显示一切正常。您能否确切说明问题所在？您是否完全看不到联系人，或者是否显示了最初的3个联系人？添加新联系人有问题吗？@skirtle，我可以看到3个初始联系人，以及新创建联系人的空白字段。仅当我添加新联系人时，此问题才会出现。同时，vue dev tools显示state.contacts已续订并包含新添加的用户数据我知道，所有数据更改都成功，因为vue dev tools显示一切正常。您能否确切说明问题所在？您是否完全看不到联系人，或者是否显示了最初的3个联系人？添加新联系人有问题吗？@skirtle，我可以看到3个初始联系人，以及新创建联系人的空白字段。仅当我添加新联系人时，此问题才会出现。同时，vue dev tools显示state.contacts已续订，并包含新添加的用户数据