Configurando Vuex
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- 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
}
});
Código inicial
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.