Esta es la segunda parte del artículo sobre Vuex & NuxtJS en el cual haré un ejemplo básico para ver cómo se utilizan los módulos ya que en la documentación oficial no está muy bien explicado. La primera parte con el video puedes encontrar aquí.
Antes de nada, este ejemplo lo tengo grabado en video, por si te resulta más cómodo ver cómo funciona. Son unos 11 minutos, parte de base del primer ejemplo:
Para crear un módulo Vuex simplemente creamos un archivo dentro de la carpeta «store» de nuestra aplicación NuxtJs, no hace falta colocarlo en la carpeta módulos, debemos olvidar un poco cómo utilizar Vuex en una single app con el framework VueJS puro. Simplemente colocamos un archivo posts.js dentro y NuxtJs se encargará automáticamente de importarlo (no hay que utilizar los trucos de autoload). El contenido del archivo post.js debería de ser algo similar a esto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// State export const state = () => ({ _posts: [] }) // 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); } } // Getters export const getters = { getPosts(state) { return state._posts } } // Mutaciones export const mutations = { setPosts(state, posts) { state._posts = posts } } |
A partir de aquí a la hora de utilizarlo por los componentes debemos tener en cuenta el diagrama que adjunto debajo, es decir lo suyo que los componentes solo tengan acceso a «actions» y «getters» desgraciadamente en la realidad no es así (por las limitaciones del lenguaje) y puedes hacer incluso un commit o mutación:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Utilizar los actions con dispatch this.$store.dispatch('posts/load', [{...}, {...}]); // Utilizar los getters this.$store.getters['posts/get']; // Acceder al state (no recomendado) pero possible this.$store.posts._posts // Realizar mutaciones (no recomendado) this.$store.commit('posts/set', [{...}, {...}]); |
Por ejemplo dentro del método created() del ciclo de vida de una app Vue puedes llamar al getter para obtener todos los posts.js, mientras que en la función fetch() puedes llamar a la acción load para cargar los posts. Este es el componente blog.vue que puedes encontrar en el código fuente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div> <h1>Blog</h1> <div v-for="post in posts" :key="post.id"> <h1>{{ post.title }}</h1> <p>{{ post.body }}</p> </div> </div> </template> <script> export default { created() { this.$store.dispatch('posts/loadPosts') }, computed: { posts() { return this.$store.getters['posts/getPosts'] } } } </script> |
Todo el código fuente funcional de este ejemplo puedes ver aquí, en mi github personal.
Este ejemplo no es perfecto…
Aunque con módulos tal cual ya te puedes apañar, la cosa se puede complicar un poco más añadiendo un archivo index.js donde colocar nuxtServerInit(). Este archivo index.js será el encargado de controlar a todos los demás módulos, como el anillo de sauron por llamarlo de algún modo. Es decir en el siguiente artículo & video explicare como hacerlo.
