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

Vue Router Patterns Chapter 20 <div> <ul> <li v-for="post in posts" :key="post.id">{{post.title}}</li> & ...

Vue Router Patterns Chapter 20 We can then add another tag inside our UserDetail.vue component to display the child route. The ...

Vue Router Patterns Chapter 20 If we then head to our browser, we can see how the data appears just as we had planned, with the ...

Vue Router Patterns Chapter 20 Summary In this section, we learned about the Vue Router and how we can use it to create Single P ...

21 State Management with Vuex In this chapter, we'll be looking at State Management Patterns with Vuex. Vuex may not be needed f ...

State Management with Vuex Chapter 21 Let's define these terms in a little more depth. State Management Pattern (SMP) We can def ...

State Management with Vuex Chapter 21 Vuex state flow Let's break down this example into a step-by-step process: Initial State ...

State Management with Vuex Chapter 21 The main component of our Vuex application(s) is, therefore, the store, our single source ...

State Management with Vuex Chapter 21 Using Vuex Now that we've had a detailed look at what makes up an application driven by Vu ...

State Management with Vuex Chapter 21 Defining action types We can then create a file inside src/store named mutation-types.js, ...

State Management with Vuex Chapter 21 Mutations A mutation is the only method in which the state of the store can be changed; th ...

State Management with Vuex Chapter 21 As we have a minuscule example, the use of a getter for this property isn't entirely neces ...

State Management with Vuex Chapter 21 Whenever the user clicks on a button, an action is dispatched from within one of the follo ...

State Management with Vuex Chapter 21 We then have an application that displays the current count and can be incremented, decrem ...

State Management with Vuex Chapter 21 Our template would, therefore, look like this: <template> <div> <h1>{{co ...

State Management with Vuex Chapter 21 We then have to update actions.js as this now receives both the state object and our amoun ...

State Management with Vuex Chapter 21 Ta-da! We can now increment the count based on a text value: ...

State Management with Vuex Chapter 21 Vuex and Vue devtools Now that we have a consistent way of interacting with our store via ...

State Management with Vuex Chapter 21 Awesome! We can see the INCREMENT action as well as a subsequent change to the state and g ...

State Management with Vuex Chapter 21 As you can see, this merges all of our actions up to when we hit commit to then be part of ...