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 toggleSaved. Vuex mutator methods receive two arguments: the store state
and a payload. This payload can be anything you want to pass from the
component to the mutator. For the current case, we will send the listing ID.
The logic for toggleSaved is to check if the listing ID is already in the saved array
and if so, remove it, or if not, add it.
resources/assets/js/store.js: export default new Vuex.Store({ state: { saved: [] },
mutations: { toggleSaved(state, id) { let index = state.saved.findIndex(saved =>
saved === id); if (index === -1) { state.saved.push(id); } else {
state.saved.splice(index, 1); } } } });
We now need to commit this mutation from ListingSave. Commit is Flux jargon
that is synonymous with call or trigger. A commit looks like a custom event
with the first argument being the name of the mutator method and the second
being the payload.
resources/assets/components/ListingSave.vue: export default { props: [ 'id' ], methods: {
toggleSaved() { this.$store.commit('toggleSaved', this.id); } } }
The main point of using mutator methods in the store architecture is that state is