vue.js - Vue + Vuex: variable stored in component saves changes even after leaving and coming back

Question

I am assigning a variable in my component to a variable stored in vuex (let's say it's empty at the beginning) like

export default {
  name: "Step1",
  [...]
  data() {
    return {
      participants: this.$store.state.participants,
  [...]

later I work with this variable and add something like

  [...]
  methods: {
    add: function() {
      this.participants.push("foo");
    },
    [...]

I never update the variable in the store as I double-check on devtools. I expect this behaviour and expect the variable to be empty again after moving to another route and coming back. But somehow the variable in the component still contains "foo" despite the variable in the store is empty.

I'd appreciate a hint what I don't understand in Vue, it's driving me crazy.

Answer 1

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')