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

(singke) #1
Large Application Patterns with Vuex Chapter 18

This was very easy, but how do you retrieve the loved name? You can put these mustachios


in your template:


<p> loves: {{$store.state.heart.loves}}</p>
<input v-model="partner" @input="love">
<button @click="clear">Clear</button>

You obviously have to declare the partner variable on your Vue instance:


How it works...


We have seen how to use modules to split your application concerns into different units.
This ability may become important as the project grows in size.


The common pattern is that while inside a mutation, you have direct access to the local
state:


const leftLobe = {
namespaced: true,
state: { reason: true },
mutations: {
toggle (state) {
// here state is the left lobe state
state.reason = !state.reason
}
}
}
Free download pdf