Estoy tratando de hacer que el componente de paginación de vuetify funcione con el módulo nuxtjs@apollo .

Pero estoy teniendo dificultades para que funcione con mi tienda vuex.

Omitiré la mayor parte del código ya que es un montón de repetitivo.

En primer lugar, para completar mi estado inicial, envío una consulta de graphql a mi back-end y los confirmo en mi estado.

 const client = context.app.apolloProvider.defaultClient const response = await client.query({ query: productsGQL, variables: { first: 5, page: 1 } }) commit('setProducts', response.data.products.data) commit('setPagination', response.data.products.paginatorInfo) commit('setPage', response.data.products.paginatorInfo.currentPage)

esto funciona bien, los productos, la paginación y la página están configurados con datos iniciales.

Ahora, tengo 2 componentes, un CardComponent que contiene todos los productos así

 <script> export default { name: 'CardComponent', computed: { products() { return this.$store.getters.getProducts } } } </script>

Y un componente de PaginationComponent :

 <template> <div> <v-pagination v-model='page' circle :length='total_pages' /> </div> </template> <script> export default { name: 'PaginationComponent', data() { return { total_pages: Math.ceil(this.$store.getters.getPagination.total / this.$store.getters.getPagination.perPage) } }, computed: { page: { get() { return this.$store.getters.getPage }, set(value) { return this.$store.commit('setPage', value) } } } } </script>

El valor inicial de la Page es 1, cuando hago clic en la segunda página, la variable de la Page se actualiza a 2, esto también se refleja en mi estado.

Lo que no estoy seguro es: ¿cómo vuelvo a requery la base de datos? la página se está actualizando, pero los productos que se muestran siguen siendo los mismos y no estoy seguro de cómo hacerlo.

Si tienes más código de la tienda, te lo mostraré aquí.