Como ya he comentado el comportamiento de Vuex dentro de Nuxt JS es un pelin diferente de como funciona en VueJS a secas. El ejemplo de ello es que disponemos de una funcion llamada nuxtServerInit con la que podemos optimizar el código de nuestra aplicación y realizar algunas tareas cuando inicializamos la app. Como por ejemplo precargar datos desde una API externa o algo relacionado con la autentificación para poder almacenarlo en el almacenamiento compartido o «state», realmente el límite es tu imaginación y los requisitos de tu proyecto. Esta función se ejecuta siempre que recargues la APP, solo una vez.
Ejemplo de nuxtServerInit(vuexContext, context)
El ejemplo completo además puedes encontrar en este video, por si te resulta más cómodo:
El caso es que esta función nuxtServerInit es llamada desde las funciones o actions del módulo principal store/index.js, si la añadimos a cualquier otro módulo no funcionará y es un error común. Sin embargo desde esta función nuxtServerInit tenemos el poder de controlar el resto de los módulos ya que tenemos acceso a commit para realizar mutaciones o dispatch para llamar a actions incluso de otros modulos
Pero además tenemos el control entero de la APP, ya que tenemos acceso a la variable context (app, params, query, req env, $axios). Este es el ejemplo de actions de nuestro store/index.js:
export const actions = {
/**
* Esta función se ejecuta al inicializarse la APP
* @param {*} vuexContext Nos da acceso a commit, dispatch, state
* @param {*} context es el mismo de asyncData y aquí tenemos acceso a toda la app: app, $axios, env, store
*/
async nuxtServerInit(vuexContext, context) {
await vuexContext.dispatch('posts/loadPosts');
},
}
Mientras en el módulo de Vuex store/posts.js tendríamos esto:
// Actions
export const actions = {
async loadPosts({ commit }) {
// Obtener los posts
let { data } = await this.$axios.get('https://jsonplaceholder.typicode.com/posts');
// Realizar un commit
commit('setPosts', data);
}
}
Cabe destacar que el método nuxtServerInit debe de ser asíncrono si en el dispatch hacemos llamada a una función asíncrona. Es decir el método debe esperar los resultados a la llamada de la API… Haciendo esto precargamos los posts dentro de nuestro almacenamiento central y con lo cual podemos tener acceso a ellos desde cualquier componente o página (que no deja de ser un componente de VueJS).
En resumen nuxtServerInit es una parte importante del framework NuxtJS y es importante saber utilizarla y entenderla. Algo que quizas no esta reflejado en la documentación oficial. Este artículo por cierto básicamente acompaña al video que he grabado y que se incluye también por aquí. Se entiende un poco mejor si echas un ojo a los artículos anteriores… Tienes el código fuente con el ejemplo completo aquí.
