problems with Vuex data rendering

Question

I'm studying reactivity of vuex using nuxt and module mode of store. The problem is, that despite all data in store is changed by actions => mutations successfully, they do not appear on the page, and shows only empty new element of store array. here are my files:

store>contacts>index.js:

let initialData = [
  {
    id: 1,
    name: 'Michael',
    email: '[email protected]',
    message: 'message from Michael'
  },
  {
    id: 2,
    name: 'Mark',
    email: '[email protected]',
    message: 'message from Mark'
  },
  {
    id: 3,
    name: 'Valery',
    email: '[email protected]',
    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}

component itself:

<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="[email protected]">
        </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>

so, could anybody help to understand, what is wrong?

I know, that all data changes are successful, because of vue dev tools shows that all is ok — Alexandr Shmidt
– Alexandr Shmidt, Commented Mar 14, 2020 at 16:26
Could you clarify exactly what the problem is? Do you see no contacts at all or do the initial 3 contacts show up? Is the problem just with adding new contacts? — skirtle
– skirtle, Commented Mar 14, 2020 at 16:36
@skirtle, I can see 3 initial contacts, and empty fields of new created contact. this problem appears only if I add new contact. at the same time, vue dev tools shows, that state.contacts is renewed and contains new added user's data — Alexandr Shmidt
– Alexandr Shmidt, Commented Mar 14, 2020 at 16:40

skirtle · Accepted Answer · 2020-03-14 16:46:48Z

2

You've got mismatched field names.

Inside obj you've called them userName, userEmail and userMessage. For all the other contacts you've called them name, email and message.

You can use different names if you want but somewhere you're going to have to map one onto the other so that they're all the same within the array.

You should be able to confirm this via the Vue Devtools. The first 3 contacts will have different fields from the newly added contact.

answered Mar 14, 2020 at 16:46

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

problems with Vuex data rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related