Vuex dynamic modules are not being namespaced

Question

I'm working with a modular vue application that registers the modules at compile time. Please see the code below -

app.js

import store from './vue-components/store';

var components = {
    erp_inventory: true,
    erp_purchase: true,
};

// Inventory Module Components
if (components.erp_inventory) {
    // erp_inventory.
    store.registerModule('erp_inventory', require('./erp-inventory/vue-components/store'));
    // erp_inventory/product_search_bar
    store.registerModule([ 'erp_inventory', 'product_search_bar' ], require('./erp-inventory/vue-components/store/products/search-bar'));
}

./erp-inventory/vue-components/store/index.js

export default {
    namespaced: true,
    state() {
        return {};
    },
    getters: {},
    actions: {}
}

./erp-inventory/vue-components/store/products/search-bar/index.js

export default {
    namespaced: true,
    state() {
        return {
            supplier_id
        };
    },
    getters: {
        supplier_id: (state) => {
            return state.supplier_id;
        }
    },
    actions: {
        set_supplier_id({ commit }, supplier_id) {
            commit('set_supplier_id', supplier_id);
        }
    },
    mutations: {
        set_supplier_id(state, supplier_id) {
            state.supplier_id = supplier_id;
        }
    }
}

When I use context.$store.dispatch('erp_inventory/product_search_bar/set_supplier_id', e.target.value, {root:true}); to dispatch the action in search-bar/index.js, vue is unable to find the namespace stating [vuex] unknown action type: erp_inventory/product_search_bar/set_supplier_id

I've read the documentation of vuex and dynamic modules and even though I've set namespaced: true, in each store, this problem persists. After dumping the store of my app I found that namespaced was never being set for registered modules (see image below).

Unless I'm doing something wrong, could it be a bug?

Linus Borg Linus Borg · Accepted Answer · 2018-07-24T06:08:25

You have to use require(....).default, otherwise you won't get the default export pc fro your ES6 module file, but object by webpack that's wrapping it.

Vuex dynamic modules are not being namespaced

1 Answers