Instalación de Viewex en Platzi Music

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0026:37

Instalación de Viewex en Platzi Music

Curso Profesional de Vue.js 2

Clase 44 de 53

Clase 44 / 53

Recursos

Integrar un state management sólido marca la diferencia en la experiencia de usuario. Aquí verás cómo se implementa Viewex en Platzi Music, cómo reemplazar el event bus por un store centralizado y cómo optimizar llamadas a la API con actions, mutations y getters, además del uso del spread operator para mapState, mapActions y mapGetters.

¿Cómo instalar Viewex y configurar Bubble para usar spread operator?

Para iniciar, se instalan las dependencias y se configura el preset necesario para habilitar el spread operator.

Instalar Viewex con NPM.

npm i -S viewex

Instalar el preset de Bubble para spread operator.

npm i -D bubble-preset-stage-2

Agregar el preset en el archivo Bubble RC en la línea posterior a environment. Combina presets si ya existe otro.
Cada cambio en webpack o Bubble requiere detener y relanzar el proceso de desarrollo.

npm run dev

Esta base habilita el uso de mapState, mapActions y mapGetters con el spread operator y prepara el proyecto para el store centralizado.

¿Cómo crear el store y reemplazar el event bus?

El objetivo es centralizar el flujo de datos y evitar la complejidad de comunicar componentes por props y eventos.

Crear el archivo store.js dentro de source.
Registrar el plugin y crear la instancia del store.

import Vue from 'vue'
import Viewex from 'viewex'

Vue.use(Viewex)

export const store = new Viewex.Store({
  state: {
    track: {}
  },
  mutations: {
    setTrack(state, track) {
      state.track = track
    }
  }
})

Importar el store en main.js e inyectarlo en la instancia de Vue junto al router.

Con esto, se elimina el event bus y se usa this.$store.commit('setTrack', track) para actualizar el estado. Las mutations permiten rastrear cambios, depurar y volver a estados previos.

¿Cómo vincular el player con mapState y computed?

El Player Component deja de manejar data local y escucha el estado global.

Importar mapState desde Viewex.
Usar computed con mapState y el spread operator para enlazar track.

import { mapState } from 'viewex'

export default {
  computed: {
    ...mapState(['track'])
  }
}

El binding se actualiza automáticamente cuando cambia el store.

¿Qué ventajas concretas tiene centralizar el estado?

Menos acoplamiento entre componentes.
Flujo de datos claro y mantenible.
Trazabilidad de cambios con commits.
Posibilidad de optimizar llamadas a la API.

¿Cómo optimizar Track Detail con actions y mapActions?

Se crea una action para obtener la canción por ID y se reutiliza la data ya existente para evitar solicitudes innecesarias.

¿Cómo se define la action getTrackByID?

Las actions manejan código asincrónico y, al resolver, comitean una mutation.

import trackService from '@/services/track'

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

Flujo recomendado: la action obtiene la respuesta, hace commit a la mutation y esta actualiza el state.

¿Cómo decidir entre usar el store o llamar a la API?

En Track Detail se combinan mapState y mapActions. Si vienes desde search, el track ya está en memoria. Si recargas la página o entras directo por URL, se llama a la API.

import { mapState, mapActions } from 'viewex'

export default {
  computed: {
    ...mapState(['track'])
  },
  methods: {
    ...mapActions(['getTrackByID'])
  },
  created() {
    const id = this.$route.params.id
    const noTrack = !this.track || !this.track.id
    const different = this.track && this.track.id !== id

    if (noTrack || different) {
      this.getTrackByID({ id }).then(() => {
        console.log('track loaded')
      })
    }
  }
}

Resultado: navegación inmediata cuando la data ya existe en el store y solicitud a la API solo cuando es necesario. Se evita latencia y carga duplicada.

¿Cómo prevenir errores por objetos vacíos en la vista?

Controlar render con v-if hasta tener track.id para no acceder a propiedades inexistentes.

<div v-if="track && track.id">
  <!-- contenido que usa track -->
</div>

Manejar estados iniciales vacíos antes de acceder a estructuras anidadas.

¿Cómo crear un getter útil y usarlo en la interfaz?

Un getter permite derivar datos del estado sin duplicarlos. Ejemplo: mostrar título con artista.

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

Usarlo en Track Detail con mapGetters y computed.

import { mapState, mapActions, mapGetters } from 'viewex'

export default {
  computed: {
    ...mapState(['track']),
    ...mapGetters(['trackTitle'])
  }
}

Ventajas del getter:

Lógica de presentación centralizada.
Recalcula de forma reactiva cuando cambia el estado.
Evita errores cuando el objeto aún no existe.

¿Qué más considerar a escala?

Viewex soporta módulos para dividir el store por dominio como track, users o albums, y luego centralizarlos. Útil en aplicaciones grandes.
Se mencionan conceptos clave: estado centralizado, patrón de flags, mutations, actions, getters y computed trabajando juntos para un flujo consistente entre componentes.

¿Tienes dudas o quieres compartir cómo aplicaste estas ideas en tu proyecto? Escribe tus preguntas o comentarios y conversemos.

Mateo Ramirez Uribe

Hace 6 años

Un saludo. Al inciar la app me sale el siguiente error luego de instalar vuex, decirle a vue que lo use y crear el store:

yarn run v1.21.1
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 9 errors                                                                 3:45:10 PM

These dependencies were not found:

* core-js/modules/es.array.concat.js in ./src/filters/ms-to-mm.js
* core-js/modules/es.array.filter.js in ./src/directives/blur.js, ./src/filters/ms-to-mm.js
* core-js/modules/es.array.for-each.js in ./src/directives/blur.js
* core-js/modules/es.number.to-fixed.js in ./src/filters/ms-to-mm.js
* core-js/modules/es.regexp.exec.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Search.vue?vue&type=script&lang=js&, ./src/services/track.js
* core-js/modules/es.string.search.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Search.vue?vue&type=script&lang=js&
* core-js/modules/web.dom-collections.for-each.js in ./src/directives/blur.js

To install them, you can run: npm install --save core-js/modules/es.array.concat.js core-js/modules/es.array.filter.js core-js/modules/es.array.for-each.js core-js/modules/es.number.to-fixed.js core-js/modules/es.regexp.exec.js core-js/modules/es.string.search.js core-js/modules/web.dom-collections.for-each.js

Estoy usando vue 2.6.11 y node 12.18.3.

Otra duda que tengo es si con las versiones nuevas de vue y de javascript es necesario agregar el preset de babel que mencionan en el video.

Carlos Eduardo Gomez García

Hace 6 años

¡Hola! Es porque daltan algunas dependencias, puedes instalarlas usando el comando que te sugiere el error

El curso es un poco viejo, aunque los conceptos aún funcionan, es probable que haya problemas entre versiones

Si estás usando Vue 2 es probable que aún tengas que añadir dicho preset

Mateo Ramirez Uribe

Hace 6 años

Gracias RetaxMaster, pero no creo que sea de eso, mira que los módulos son de paquetes del core de JavaScript y fallan en archivos que funcionaban antes de la instalación de redux. Además al intentar instalarlos sale un error de npm. Muchas gracias.

Comentarios (33)33 comentarios

Jhossept Romero

Hace 9 años

Nacho Anaya

Profesor

Ivan Toro

Hace 8 años

David Daza

Angel Camacho

Alejandro González Reyes

Hace 7 años

Gerardo Pérez Pérez

Hace 4 años

Rogelio Alberto

Marcos Matamala

Sebastián Buitrago

Hace 5 años

Ruben Eduardo Acosta Vela

Kevin Nick Pascual Tuesta

Nicolas Gonzalez

Jeff Velez

Cristhian Daza

softdynamic sac

Juan Castro

Juan Esteban Galvis

Luis Lira

Luis Alfredo Navarro Albarracin

Juan Carlos Correa Herrera

Winston Chavez

Edwar Cedeño

Daniel Gonzalez Blanco

Ricardo Celis

Ludwing Juan Homero Pérez Tzaquitzal

Jesús Miguel Quinto Teran

Carlos Bolivar

Edward Steven Ramos Palacios

Julio Hernandez Gorocica

Diego Forero

Team Platzi

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa

Instalación de Viewex en Platzi Music