Vue.js 2 Web Development Projects

State management

When processing a request, we need to fetch the data on the relevant components before rendering the app. That way, the data will already be displayed when the HTML is loaded by the browser. For example, PageHome.vue fetches the store items and PageStoreItem.vue retrieves the item details and comments.

We will add a new asyncData custom option to those, so we can call it on the server when doing SSR.

1. Edit the PageHome.vue component by adding this function that dispatches the fetchItems action of the items store module:

      asyncData ({ store }) {        return store.dispatch('items/fetchItems')      },

2. In the PageStoreItem.vue component, we need to call the fetchStoreItemDetails action of the item store module, with the id parameter ...