Nuxt & Vuex – Parte 1. Ejemplo básico y explicación.

NuxtJS es un soplo de aire fresco dentro de los frameworks JavaScript que nos permite realizar apps de una forma más fácil e intuitiva, acelerando el desarrollo. Dentro de este framework Vuex resulta imprescindible para optimizar y añadir funcionalidades básicas como la autenticación, es algo así como un almacenamiento central que viene heredado del VueJS, pero al estar integrado dentro de Nuxt funciona de una forma algo diferente y con algún método propio que se ejecuta en el lado del servidor, como el nuxtServerInit que explicare en el ejemplo de la tercera parte de este artículo.

La razón de estos artículos es que uno de los puntos débiles de NuxtJS quizás es la escasa documentación, sin unos ejemplos lo suficientemente claros, algo que por cierto van mejorando. En fin este es el primer ejemplo básico:

Ejemplo básico

Por si te interesa he grabado un screencast de una aplicación muy simple en video realizada desde 0 y lo puedes ver algo más abajo, en caso contrario echa un ojo a las instrucciones.

Para ello dentro de la carpeta store crearemos un archivo index.js. Este archivo será automáticamente importado dentro de nuestra app NuxtJS. El contenido será este:

// Estado
export const state = () => ({
    _counter: 0
});

//Acciones
export const actions = {
    sumar(context, num) {
        context.commit('SUMAR', num)
    }
};

// Mutaciones
export const mutations = {
    SUMAR(state, num) {
        state._counter += num;
    }
};

// Accesores
export const getters = {
    getCounter(state) {
        return state._counter;
    }
}

state: Es una función que devuelve un objeto en el cual declaramos nuestro almacenamiento central. En este caso tenemos simplemente un contador o un número inicializado a 0. En principio no deberíamos acceder a estas variables desde los componentes. El diagrama o la arquitectura de Vuex que adjunto nos dicta que para cambiar o mutar el valor de _counter debemos utilizar los mutadores o mutations.

actions: Son funciones cuyo fin es llamar a las mutaciones. Pueden ser asíncronas (lugar ideal para llamar a las APIs), contener lógica de negocio y además podemos llamar a varias mutaciones. Estas funciones son las que vamos a llamar desde los métodos de los componentes para realizar cambios en el almacenamiento o estado (state), por ejemplo los podemos colocar en los métodos de ciclos de vida como created(), mounted() o dentro de las funciones methods: {}.

mutations: Son funciones cuyo único objetivo es realizar una mutación o cambio en el valor de algún almacenamiento central. No pueden ser asíncronas ni contener la lógica de negocio. En principio no se debería de llamar desde los componentes.

getters: Son métodos accesores cuya función es simplemente devolver el valor del estado o almacenamiento central. Es muy cómodo utilizarlo desde los métodos o funciones computed del componente.

Esto es un ejemplo breve de cómo se podría utilizar este almacenamiento compartido desde el componente:

computed: {
    contador() {
      return this.$store.getters['getCounter'];
    },
  },

  methods: {
    sumarDos() {
      this.$store.dispatch('sumar', 2)
    }
  }

Acciones vs Mutaciones

Es bastante confuso en un principio tener a acciones y mutaciones con prácticamente la misma función con un ejemplo tan simple, pero más adelante y con la práctica se verá para qué sirve cada cosa. Como ya he dicho la principal diferencia es que las acciones pueden ser funciones asíncronas (es decir contener llamadas a la api externa), pueden tener lógica de negocio y llamar a varias mutaciones. Las mutaciones tan solo se encargan de mutar los valores del almacenamiento, nada más.

Espero que te sirva y que hayas aprendido algo, además he grabado un video para que quede un poco más claro. En el siguiente ejemplo (lo puedes encontrar aquí) explicare como utilizar los módulos de VueX y en la última parte la función nuxtServerInit. Si tienes algo que objetar dejame un comentario en el video o en el blog. Lógicamente también tienes el código github por aquí.