Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Antes de comenzar a crear las vistas y la lógica para procesar usuarios a través de Firebase Auth, debemos configurar la pieza central de nuestra aplicación: el gestor de estado.
  • Para ello usaremos Vuex. Aquí guardaremos los modelos de nuestro proyecto: usuarios, salas y mensajes, además de todas las funciones que conectan con Firebase, utilidades u otros servicios.
  • Si esto de Vuex es un poco borroso para ti, no te preocupes, en Escuela Vue tienes un curso de Vuex completo.
  • Usaremos varios módulos Vuex: uno para cada modelo y otro para las utilidades. Puede parecer laborioso pero en mi opinión es la única forma de tener cierto control entre todas las mutaciones, acciones, getters y demás que vamos a utilizar en el proyecto.
  • Primero ajustamos index.js para poder lanzar la acción (que más adelante completaremos) checkAuth.
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {
    checkAuth() {}
  },
  modules: {}
});

export default store;

// Initial load
store.dispatch("checkAuth");
  • Luego, iremos creando los módulos Vuex: messages.js, rooms.js, user.js, utils.js y por últimos los añadiremos en el archivo central.
const store = new Vuex.Store({
    ...
  modules: {
    messages,
    rooms,
    user,
    utils
  }
});

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue