Integración de VueX y Babel en PlatziMusic

¿Cómo integrar Vuex a nuestro proyecto?

Para llevar nuestro proyecto PlatziMusic al siguiente nivel, es fundamental integrar Vuex, una poderosa librería que facilita la gestión del estado de nuestras aplicaciones Vue. Esto nos permitirá centralizar y estructurar mejor la interacción entre componentes. Sigamos juntos este emocionante viaje a través de los pasos necesarios para implementar Vuex.

¿Cómo instalar las dependencias necesarias?

El primer paso es abrir la terminal para instalar los módulos faltantes. Necesitamos Vuex, esencial para el state management, y un preset de Babel para usar el Spread Operator. Ejecutamos el siguiente comando para instalar Vuex:

npm i -S vuex

Una vez instalado, configuramos el preset de Babel. Visitamos el sitio de Babel para copiar el nombre exacto del preset necesario, que es @babel/preset-stage-2. Instalamos este preset y lo integramos a nuestro archivo .babelrc de la siguiente manera:

npm i -D @babel/preset-stage-2

Y configuramos en nuestro .babelrc:

{
  "presets": [
    ["@babel/preset-env"],
    ["@babel/preset-stage-2"]
  ]
}

¿Cómo configurar Vuex en el proyecto?

Una vez instaladas las dependencias, creamos nuestro store.js dentro de la carpeta src. Comenzamos importando las librerías necesarias:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

Creamos una instancia de Vuex Store:

const store = new Vuex.Store({
  state: {
    track: {}
  }
});

export default store;

Integramos este store en nuestro main.js, importándolo y agregándolo a la instancia de Vue:

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  render: h => h(App),
  store
}).$mount('#app');

¿Por qué utilizar el store en lugar del eventBus?

El uso de eventBus se vuelve complicado en aplicaciones grandes debido a las complejidades en la comunicación entre padre e hijo. Con Vuex, centralizamos los datos, mejorando el flujo de información y simplificando su mantenimiento.

¿Cómo reemplazar eventBus por Vuex en un componente?

Vamos a modificar el archivo mixin.js para dejar de utilizar eventBus. Cambiamos el código para usar Vuex:

this.$store.commit('setTrack', track);

Para gestionar estos cambios, creamos una mutación en store.js:

const mutations = {
  setTrack(state, track) {
    state.track = track;
  }
};

Esto asegura que las actualizaciones del estado pasan por un intermediario, permitiendo el seguimiento de cambios y una mejor depuración.

¿Cómo optimizar llamadas API con actions y getters?

En nuestro store, creamos una acción para obtener información de las canciones. Se para de esta manera permitiendo manejar código asincrónico:

const actions = {
  getTrackByID({ commit }, payload) {
    return trackService.getByID(payload.id).then(track => {
      commit('setTrack', track);
      return track;
    });
  }
};

Agregamos un getter para dar formato al título de la canción:

const getters = {
  trackTitle(state) {
    return state.track.name ? `${state.track.name} - ${state.track.artist[0].name}` : '';
  }
};

¿Cómo implementar estas funcionalidades en los componentes?

Importamos mapState, mapGetters, y mapActions en el componente TrackDetail para facilitar la integración:

import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['track']),
    ...mapGetters(['trackTitle'])
  },
  methods: {
    ...mapActions(['getTrackByID'])
  },
  created() {
    const id = this.$route.params.id;
    if (!this.track.id || this.track.id !== id) {
      this.getTrackByID({ id }).then(() => console.log('Track loaded'));
    }
  }
};

Esto asegura que las acciones y los estados se gestionan eficientemente, optimizando las llamadas a la API únicamente cuando es necesario.

Vuex es una herramienta poderosa para aplicaciones Vue. Al centralizar la gestión de estado, nos permite construir aplicaciones más robustas y mantenibles. Te animo a continuar explorando todas sus funcionalidades y a integrar nuevas prácticas en tus proyectos.