Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Large Application Patterns with Vuex Chapter 18

Setting namespaced to true modifies the way you can call the mutator. Since they are both

called toggle, now you can specify which lobe, for example, for the left lobe the mutation

string becomes left/toggle, where left says it is the key used in the brain to refer to the

left lobe.

To see your store in action, you can create a component that uses all the mutations. For the
brain, we can have two pictures of the lobes, like so:

<img

:class="{ off: !$store.state.brain.left.reason }"

src="http://i.imgur.com/n8B6wuY.png"

@click="left"><img

:class="{ off: !$store.state.brain.right.fantasy }"

src="http://i.imgur.com/4BbfVur.png"

@click="right">

This will create two drawings of brain lobes in red pencil; note the use of the name of the

modules in a nested way. The following off CSS rule grays the lobes out:

.off {

filter: grayscale(100%)

}

To call the mutations, we use the aforementioned strings in the right methods:

methods: {

left () {

this.$store.commit('left/toggle')

},

right () {

this.$store.commit('right/toggle')

}

}

You can also create an input textbox and call the other two mutations, as follows:

...

love () {

this.$store.commit('love', this.partner)

},

clear () {

this.$store.commit('unlove')

this.partner = undefined

}

...