javascript - Vuex 动态模块没有命名空间

Question

我正在使用一个模块化的 vue 应用程序，它在编译时注册模块。请参阅下面的代码 -

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

当我使用 context.$store.dispatch('erp_inventory/product_search_bar/set_supplier_id', e.target.value, {root:true}); 在 search-bar/中调度操作时index.js，vue 无法找到命名空间，指出 [vuex] 未知操作类型:erp_inventory/product_search_bar/set_supplier_id

我已经阅读了 vuex 和动态模块的文档，即使我在每个商店中设置了 namespaced: true, ，这个问题仍然存在。转储我的应用程序存储后，我发现从未为注册模块设置namespaced(请参见下图)。

除非我做错了什么，否则这可能是一个错误吗？

Answer 1

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