Si quisiera modularizar con Vuex, tengo que repetir el proceso de store.js? Es decir, tengo que crear store2.js y repetir los pasos?

Jaime Ortiz

Jaime Ortiz

Pregunta
student
hace 5 años

Si quisiera modularizar con Vuex, tengo que repetir el proceso de store.js? Es decir, tengo que crear store2.js y repetir los pasos?

6 respuestas
    Andrés D Amelio

    Andrés D Amelio

    student
    hace 5 años

    Hola @jaalorsa519, a que te refieres con modulizar?

    Jaime Ortiz

    Jaime Ortiz

    student
    hace 5 años

    Modularizar me refiero a que quiero dividir el código para fácil manutención y escalabilidad. Mi pregunta de otra forma es: Hago una aplicacion que maneja los datos de un usuario y de una empresa. Lo que necesito es tener un Vuex para el usuario y otro Vuex para la empresa. Hay que crear un storejs y un storejs2?

    Andrés D Amelio

    Andrés D Amelio

    student
    hace 5 años

    No, no es necesario, puedes usar los módulos de vuex, y usar cada uno cuando necesites, para esto te recomiendo, que crees la siguiente estructura, una carpeta llamada store, dentro de esa vas a tener tu archivo store.js que es el principal, y una carpeta que se llame modules, dentro de esa carpeta agregaras tus archivos, en tu caso podría ser usuario.js y empresa.js, en cada uno vas a definir la siguiente estructura

    export default { namespaced: true, state: {}, mutations: {}, actions: {}, getters: {} };

    Y con eso tienes la estructura de cada archivo, el namespace es para que puedas llamar a tu modulo por su nombre. Y en tu archivo principal vas a tener lo siguiente

    // Importas los archivos que creaste en tu carpeta import usuario from "./modules/usuario.js"; import empresa from "./modules/empresa.js"; export default new Vuex.Store({ getters: {}, mutations: {}, state: {}, actions: {}, modules: { usuario, empresa }, });

    Ya con eso tienes tus módulos y puedes manejar todo por separado, tener tu propio state, mutations, getters y actions por modulo.

    Ahora cada vez que desde algún componente quieras usar los alguno de ellos, debes hacer referencia. te dejo algunos ejemplos

    // usar un getter de empresa this.$store.getters["empresa/nombreGetter"]; // Ejecutar una accion this.$store.dispatch("empresa/nombreAccion"); // Ejecutar una mutacion this.$store.commit("empresa/nombreMutacion", argumentos); // Usar el state this.$store.state.empresa.propiedad
    Andrés D Amelio

    Andrés D Amelio

    student
    hace 5 años

    En cierta forma repites los pasos, pero es necesario para mantener un único store que contenga diferentes módulos.

    Jaime Ortiz

    Jaime Ortiz

    student
    hace 5 años

    Muchas gracias por tomarte el tiempo en hacer una respuesta tan clara. Me quedó mi duda solucionada

    Andrés D Amelio

    Andrés D Amelio

    student
    hace 5 años

    De nada @jaalorsa519 para eso estamos, para ayudarnos entre todos.

Curso Profesional de Vue.js

Curso Profesional de Vue.js

Aprende a crear aplicaciones profesionales con Vue.js. Gestiona el estado con Vuex, junto a rutas modernas con Vue Router. Implementa autenticación con JSON Web Tokens y mejora la UI con transiciones. Lleva tus proyectos a producción usando Now.

Curso Profesional de Vue.js
Curso Profesional de Vue.js

Curso Profesional de Vue.js

Aprende a crear aplicaciones profesionales con Vue.js. Gestiona el estado con Vuex, junto a rutas modernas con Vue Router. Implementa autenticación con JSON Web Tokens y mejora la UI con transiciones. Lleva tus proyectos a producción usando Now.