Proyecto cliente SPA para la API de películas con Nuxt.js

Manejando las favoritas en el store

Vamos a hacer que el usuario pueda marcar y desmarcar películas como favoritas, sin embargo antes necesitamos controlar en todo momento las películas que ya son favoritas, por ejemplo teniendo la lista en el store.

No necesitamos guardar toda la información, nos bastaría con un array que contenga sólo los id:

store/index.js

export const state = () => ({
  ...
  favIds: []
})

Para manejarlo podemos crear una mutación llamada toggleFavorite que añada o borre un id a la lista:

toggleFavorite(state, id){
  var index = state.favIds.indexOf(id)
  if (index !== -1) state.favIds.splice(index, 1)
  else state.favIds.push(id)
}

El momento perfecto para añadirlas en el store es al acceder al visitar la página de pelis favoritas, pero sólo si el arregla está vacío será necesario agregarlas:

pages/favoritas.js

.then((res) => {
  // Añadimos los ids de las pelis favoritas al store
  if (store.state.favIds.length == 0) {
    res.data.forEach((fav) => {
      store.commit('toggleFavorite', fav.pelicula.id)
    });
  }
  return {
    'favoritas': res.data
  }
})

Comprobando el store con la extensión de Vue podemos ver cómo se ejecuta un commit cada vez que se añade una peli a favoritos.

Con esto ya podemos controlar los cambios en la memoria de la aplicación, no nos costaría mucho añadir una clase activa al botón si la peli actual forma parte de la lista en el store:

components/Peli.vue

<a 
  class="button is-light card-footer-item"
  :class="{ 'is-primary': 
            this.$store.state.favIds.indexOf(peli.id) !== -1 }"
>

Como estamos trabajando con componentes esto nos funcionará tanto en la portada como en la sección películas.