Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

164
Vistas
How do I enable namespacing on an imported VueX module?

I'm using a helper file to import VueX modules:

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 modules

This lives in @/store/modules/index.js and is imported by @/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`);
      })
    }
  }
})

Imported in to 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')

Works great for all of my store modules! Each of which are namespaced:

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
}

Now, I'm trying to import a package as a state module. Which I don't have any experience with. This might seem silly... but I'm not sure how to inject the namespace enablement into the package importation in @/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 cognito

So when I try to call the imported store module's actions with $store.dispatch('Auth/...') they're not found... because they're not namespaced. I want to namespace this module "Auth". I bet I'm overlooking something really simple. Any help appreciated.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

My first try would be (based on the docs of this package on 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>'
    })
  }
});

The code above shows that you can import it as a module (they named it cognito, you want auth - that should make no difference; I use the naming in the official docs). So you need to update your code, like this:

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`);
      })
    }
  }
})

I'm not sure this works, but this would be my first try :)

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda