Vue.js 2 Web Development Projects

Unnecessary fetch

Unfortunately, something is wrong with our app. The server sends the Vuex store data alongside the HTML of the page, which means the app already has all the data it needs when running for the first time, except that the requests to retrieve the stored items of the item details and comments are still being made. You can see this because of the loading animation that appears when you first load or when you refresh one of the corresponding pages.

The solution to this is to prevent the components from fetching data if it is not necessary:

1. In the PageHome.vue component, we need to fetch the items only if we don't have them already:

      mounted () {        if (!this.items.length) {          this.fetchItems()        }      },

2.  In the PageStoreItem.vue component, ...