Building an E-Commerce Store - Browsing Products Chapter 10We now need to keep track of two variables – items perPage and the currentPage. Create
a data function on your HomePage component and store these two variables. We'll give the
user the ability to update the perPage variable later on. The highlighted code portion
shows our data function:
const HomePage = {
name: 'HomePage',template: `...`,data() {
return {
perPage: 12,
currentPage: 1
}
},computed: {
...
}
};You may be wondering when to use local data on a component and when
to store the information in the Vuex store. This all depends on where you
are going to be using the data and what is going to manipulating it. As a
general rule, if only one component uses the data and manipulate it, then
use the local data() function. However, if more than one component is
going to be interacting with the variable, save it in the central store.Back to the pagination() computed function, store a variable with the length of the
products array. With this as a variable, we can now calculate the total pages. To do this,
we are going to do the following equation:
total number of products / items per page
Once we have this result, we need to round it up to the nearest integer. This is because if
there is any hangover, we need to create a new page for it.