[Vuejs]-Vue + Vuex: variable stored in component saves changes even after leaving and coming back

by

0👍

✅

Thanks to some help here I found a workaround:

Make a local copy of the variable in the component, e.g. with using spread syntax for iterable objects and simple assignments for primitive datatypes, and update the whole object after working with it.

Check this to for get an understanding for call-by-value and call-by-reference in JavaScript: stackoverflow.com/a/6605700/381282

<template>
  [...]
</template>

<script>
export default {
  name: "Step1",
  [...]
  data() {
    return {
      participants: [...this.$store.state.participants]
  [...]
  methods:
    updateParticipants: function() {
      $store.commit('updateParticipants', this.participants)
  [...]
<script>

0👍

You should never change the store state directly like that. As stated in the docs:

The only way to actually change state in a Vuex store is by committing a mutation.

So in your store, you have to add a mutation method, like so:

mutations: {
    addParticipant(state, participant) {
      state.participants.push(participant);
    }
}

And call that: this.$store.commit('addParticipant', 'Foo')

Leave a comment