I've been tackling a modular vue application that enrolls the modules during compile time. Take a look at the code snippet 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;
}
}
}
Whenever I employ
context.$store.dispatch('erp_inventory/product_search_bar/set_supplier_id', e.target.value, {root:true});[vuex] unknown action type: erp_inventory/product_search_bar/set_supplier_id I've thoroughly gone through the vuex documentation and dynamic modules, yet despite setting namespaced: true, in each store, this issue lingers. Upon inspecting the store of my app, I noticed that namespaced was never being established for registered modules (refer to image below).
https://i.sstatic.net/9E7A7.png
Unless I'm missing something crucial, could it possibly be a bug?