Estoy usando un archivo auxiliar para importar módulos VueX:
const requireModule = require.context('.', false, /\.store\.js$/) const modules = {} requireModule.keys().forEach(filename => { const moduleName = filename .replace(/(\.\/|\.store\.js)/g, '') .replace(/^\w/, c => c.toUpperCase()) modules[moduleName] = requireModule(filename).default || requireModule(filename) }) export default modulesEsto vive en @/store/modules/index.js y es importado por @/store/index.js:
import Vue from 'vue' import Vuex from 'vuex' import modules from './modules' Vue.use(Vuex) export default new Vuex.Store({ modules, actions: { reset({commit}) { Object.keys(modules).forEach(moduleName => { commit(`${moduleName}/RESET`); }) } } })Importado a Vue: @/main.js:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')¡Funciona muy bien para todos los módulos de mi tienda! Cada uno de los cuales tiene un espacio de nombres:
const initialState = () => ({}) const state = initialState() const mutations = { RESET(state) { const newState = initialState(); Object.keys(newState).forEach(key => { state[key] = newState[key] }); } } const getters = {} const actions = {} export default { namespaced: true, state, getters, actions, mutations }Ahora, estoy tratando de importar un paquete como un módulo de estado. Con lo cual no tengo ninguna experiencia. Esto puede parecer una tontería... pero no estoy seguro de cómo inyectar la habilitación del espacio de nombres en la importación del paquete en @/store/modules/Auth.store.js:
import AmazonCognitoVuexModule from 'amazon-cognito-vuex-module'; const cognito = new AmazonCognitoVuexModule({ region: process.env.VUE_APP_COGNITO_REGION, userPoolId: process.env.VUE_APP_COGNITO_USERPOOL_ID, clientId: process.env.VUE_APP_COGNITO_CLIENT_ID, }) export default cognitoEntonces, cuando intento llamar a las acciones del módulo de tienda importado con $store.dispatch('Auth/...') no se encuentran... porque no tienen espacio de nombres. Quiero nombrar este módulo como "Auth". Apuesto a que estoy pasando por alto algo realmente simple. Cualquier ayuda apreciada.
Mi primer intento sería (basado en los documentos de este paquete en NPM):
// source: https://www.npmjs.com/package/amazon-cognito-vuex-module const store = new Vuex.Store({ modules: { cognito: new AmazonCognitoVuexModule({ region: '<region>', userPoolId: '<user pool id>', clientId: '<client id>' }) } }); El código anterior muestra que puede importarlo como un módulo (lo llamaron cognito , desea auth , eso no debería hacer ninguna diferencia; uso el nombre en los documentos oficiales). Entonces necesitas actualizar tu código, así:
import Vue from 'vue' import Vuex from 'vuex' import modules from './modules' import cognito from './path/to/cognito' Vue.use(Vuex) export default new Vuex.Store({ modules: { ...modules, cognito, }, actions: { reset({commit}) { Object.keys(modules).forEach(moduleName => { commit(`${moduleName}/RESET`); }) } } })No estoy seguro de que esto funcione, pero este sería mi primer intento :)