Cargar módulos Vuex dinámicamente

Vuex es una solución fácil de usar y de alto rendimiento para gestionar el estado. Facilita la gestión de aplicaciones Vue.js a gran escala y garantiza una forma predecible de modificar el estado mediante la exposición de un almacén.

Quizás ya conozcas Vuex, pero si no, Joshua Bemenderfer nos dio una excelente introducción.

Puedes definir módulos en tu tienda Vuex de la siguiente manera:

const dogs = {  state: {    data: []  },  mutations: {    addDog(state, dog) {      state.data.push(dog)    }  }}const store = new Vuex.Store({  modules: {    dogs  }});

Por lo general, una aplicación grande tiene varios módulos. Todos ellos se definen de forma estática en su propio archivo y se combinan entre sí al llamarlos new Vuex.Store. Eso es lo que deberías hacer en prácticamente todos los casos.

Pero podría haber un caso muy específico en el que quieras cargar un módulo Vuex dinámicamente en tu aplicación, extendiendo la tienda actual en ese punto.

Un caso muy específico, ¿cómo se llama? Se podría estar escribiendo una biblioteca de componentes externos que dependa de Vuex.

Lo mismo podría aplicarse a una aplicación dividida en varios paquetes internos. Cada paquete podría tener sus propios componentes y almacenes.

Por lo general, este es el caso de los módulos reutilizables comunes entre aplicaciones. Por ejemplo, unnotificacionesmódulo que proporciona algunos componentes de notificación y unalmacenarmódulo que amplía su tienda de aplicaciones, agregando un nuevo módulo al que se puede acceder desde cualquier lugar de su aplicación.

Veamos cómo hacerlo.

Agregar un módulo dinámicamente a la tienda

Dada una aplicación con una configuración Vuex habitual, creemos unanotificacionesCarpeta. Puedes colocarla donde quieras, solo imagina que es un paquete externo.

Allí, añade unestado.jscon un módulo Vuex básico:

notificaciones/estado.js

export default {  state: [],  mutations: {    addNotification(state, notification) {      state.push(notification);    }  }};

Luego crea unNotificaciones.vuearchivo donde lo importas. Luego accederás a la $storevariable de instancia, suponiendo que hay un almacén Vuex para obtener el estado y confirmar un addNotification:

notificaciones/Notificaciones.vue

template  div    p v-for="notification in notifications"      {{notification}}    /p    button @click="addHey"Add Hey!/button  /div/templatescriptimport state from "./state";export default {  computed: {    notifications() {      return this.$store.state.notifications;    }  },  methods: {    addHey() {      this.$store.commit("addNotification", "Hey!");    }  }};/script

Ahora, la idea es que los módulos de notificaciones de Vuex se agreguen automáticamente cuando se use el componente. De esa manera, si una aplicación externa usa el componente, todo viene incluido y la aplicación no tiene que preocuparse por agregarlo directamente. Por lo tanto, podríamos usar el createdgancho para eso.

Y, para agregar dinámicamente el módulo Vuex, podemos usar la propiedad de instancia de la tienda $store.registerModule:

notificaciones/Notificaciones.vue

import state from "./state";export default {  // ...  created() {    this.$store.registerModule("notifications", state);  }};

Ahora el módulo se registrará cuando elNotificacionesSe utilizan componentes.

Terminando

La tienda Vuex en aplicaciones grandes está organizada de forma estática a través de diferentes módulos. Así es como debería ser. Pero en casos muy específicos, es posible que necesites ampliar la tienda y agregar un módulo tú mismo.

Puedes ver la demostración funcional y el código de este artículo en este Codesandbox

Mantente fresco