Vuex动态模块未命名空间

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?

Answer 1

您必须使用require（....）。default，否则您将无法从ES6模块文件获得默认的导出pc，而是通过包装它的webpack来获取对象。