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] unknown action type: erp_inventory/product_search_bar/set_supplier_id 的命名空间

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

除非我做错了什么，否则会是错误吗？

Answer 1

你必须使用 require(....).default，否则你不会从你的 ES6 模块文件中得到默认的导出 pc，而是由包装它的 webpack 对象。