En esta tercera parte de la serie Trabajando con Vuetify (parte 1 y parte 2), vamos a centrarnos en Vuex, donde os dejaré una estructura que es la que yo suelo utilizar, así como algunas “cosillas” más que también uso.
Qué es Vuex
Vuex es …. el mejor invento de todo lo que conozco desde que trabajo con Javascript, y especialmente, desde que lo hago con VueJS. La mejor definición está en su propia página, pero básicamente es un gestor de información, convertido en librería de VueJS, que lo convierte en un contenedor centralizado de información.
Es decir, es un contenedor que permite guardar y leer información. Para utilizarlo, lo mejor es aprenderse cómo funciona, siguiendo el esquema:
Es decir, Vuex tiene un estado state que es “es que tiene la verdad”. Asociado tiene las vistas View, que es un mapeo del state, y por último, las acciones Actions, que es lo que cambia el state.
Todo esto es muy teórico, porque en realidad, para trabajar con Vuex necesitas comprender el siguiente esquema:
VueX se fundamenta en el State como contenedor de información, que pueden leer los componentes. Sin embargo, para modificar la información hay que hacerlo mediante las mutaciones Mutations, que son las que ejecutan las modificaciones del State.
Sin embargo, las modificaciones no siempre son instantáneas en cuanto a solicitud por parte de los componentes, sino que requieren tiempo. De ahí que para temas de asincronía, sea necesario ejecutar acciones Actions, que son las que llaman a las APIs, y una vez recuperada la información, se ejecutan los Commits en las mutaciones Mutations.
Aparentemente, es un poco lioso, y créeme que al principio lo es. Sin embargo, una vez dominas la terminología que hay detrás del esquema de VueX, todo es bastante sencillo. Así, crearás las Actions con las llamadas a las API, y con lo el resultado que obtengas, llamaras a los commits. Las acciones Actions son ejecutadas mediante dispatch.
Y hasta aquí, la teoría de Vuex. Hora de ver código relacionado.
Preparando el contenedor VueX
El contenedor de VueX, el state, se ha preparado en store/_index.js y cuyo código es el siguiente:
// Store by Vuex
// Version 1.2.2 - 20190326
const mapState = Vuex.mapState;
const mapGetters = Vuex.mapGetters;
const mapActions = Vuex.mapActions;
const mapMutations = Vuex.mapMutations;
const demo = true;
const _app = (demo) ? `Manejando Datos - DaskBoard Demo` : `Manejando Datos - DashBoard` ;
const _vers = (demo) ? '0.1.01' : '0.1.02'
// STATE VUEX
const state = {
demo: true,
app: _app,
version: _vers,
loading: false,
card_text: 'Trabajando'
}
const getters = {
appversion: state => { return `${state.app} - ${state.version}`; },
}
const mutations = {
show_loading: set('loading')
}
const store = new Vuex.Store({
strict: true, // en development
state,
getters,
mutations,
modules: { // Your store-modules
test,
}
})
Al principio se han definido “acortadores” de funciones VueX, que serán utilizados en toda la aplicación, y son mapState, mapGetters, mapActions y mapMutations.
En mi caso, me gusta definir una variable demo, que es siempre booleana, para identificar si está en pruebas o en producción, lo que permite control de ciertos elementos.
Yo suelo utilizar también este fichero store/_index.js para definir variables globales para usar en toda la aplicación, en caso de que sea necesario. Así, se han definido demo, versión y app. Tu puedes incluir lo que necesites.
Al final del fichero store/_index.js, se han definido los cuatro elementos básicos: state, getters, mutations y actions, y se han integrado en la variable store, que las agrupa.
Modificaciones en el HTML
Para incluir el store, necesitaremos realizar modificaciones en el código HTML, para incluir la carga de la librería Vuex y el fichero de store que hemos preparado (sólo pongo el body).
<body>
<div id="app"></div>
<script src="utils/state-mutators.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js" crossorigin="anonymous"></script>
<script src="store/test.js"></script>
<script src="store/_index.js"></script>
<script src="components/menu.js"></script>
<script src="scripts/index.js"></script>
</body>Se incluye la libraria state-mutators.js del que hablaré en detalle en otra entrada, pero también incorporamos un módulo (test).
Por otro lado, necesitaremos incorporar estas novedades a scrips/index.js, cuyo código queda ahora así:
const bus = new Vue();
const vuetifyOptions = { };
Vue.use(Vuetify);
const app = new Vue({
el: '#app',
store,
vuetify: new Vuetify(vuetifyOptions),
template:
`
<v-app v-cloak>
<transition mode="out-in" name="fade">
<menu-app></menu-app>
</transition>
</v-app>`
});
La única modificación es que se ha incluido store en la variable app, para hacerla disponible al objeto vue.
Para utilizar VueX, realizamos también modificaciones en el componente menú, básicamente, rescatando los datos del store:
computed: {
...mapGetters(['appversion']),
...mapState(['version']),
},y ya podemos hacer uso de ellas en la plantilla, quedando con las modificaciones realizadas, tal que así:
VueX también se integra en las VueTools
Cómo parte fundamental de VueJS, todo lo que afecta a VueX también está incluido en las VueTools, por lo que puedes ver los valores del store, getters, actions, mutations, …. de todo tu state cuando estés depurando la aplicación. Sin duda, fundamental el uso de VueX con VueJS.
Y hasta aquí, la parte 3 de trabajando con Vuetify, ampliado con VueX. Para la parte 4 hablaremos de módulos de VueX, algo vital cuando el tamaño de la aplicación crece, y dejamos las mejoras para el final.