Full-Stack Vue.js 2 and Laravel 5

Mutator method

We created the stub for a toggleSaved method in our ListingSave component. This method should add or remove the listing's ID from the saved state in the store. Components can access the store as this.$store. More specifically, the saved array can be accessed at this.$store.state.saved.

resources/assets/components/ListingSave.vue:

methods: {
  toggleSaved() {
    console.log(this.$store.state.saved);
    /* Currently an empty array.
      []
    */
  }
}

Remember that in the Flux architecture state is read-only. That means we cannot directly modify saved from a component. Instead, we must create a mutator method in the store which does the modification for us.

Let's create a mutations property in our store configuration, and add a function property ...