javascript - สโตร์ไม่สามารถลงทะเบียนโมดูลที่นำเข้าแบบไดนามิกได้
ฉันต้องการสร้างฟีเจอร์ที่สามารถลงทะเบียนและยกเลิกการลงทะเบียนโมดูลบางอย่างเมื่อคอมโพเนนต์ถูกสร้าง/ทำลาย และการทดสอบของฉันเป็นแบบนี้:
// ../store/DMRTest.ts
const DMRTest = {
state: { name: 'DMR test ' },
mutations: {
getName(state) {
state.name += state.name;
}
},
actions: {},
getters: { NN(state) { return state.name; } },
};
export default DMRTest;
// App.vue
import DMRTest from '../store/DMRTest.ts';
// ...
async created() {
// Not works!
this.$store.registerModule('DMRTest', await import('../store/DMRTest.ts'));
// Works
this.$store.registerModule('DMRTest', DMRTest);
console.log(this.$store);
console.log(this.$store.state);
}เมื่อฉันนำเข้ามอดูลแบบสแตติก มันจะถูกลงทะเบียนอย่างถูกต้อง:
แต่เมื่อฉันใช้ฟังก์ชัน import ร้านค้าจะลงทะเบียนโมดูลแบบนี้:
ฉันจะสามารถนำเข้ามอดูลแบบไดนามิกได้อย่างไร?
คำตอบ #1
ฉันควรแนบ default หลังจากที่นำเข้าที่เป็นไดนามิก, คำถามปิดแล้ว
คำตอบ #2
เพียงเพื่อให้มันถูกเขียนด้วยตัวอย่าง:
const store = new createStore(rootStoreModule);
const modules = ['moduleA', 'moduleB']
for(const module of modules) {
import(`./components/${ module.toLowerCase() }/store.js`)
.then( (obj) => { store.registerModule(module, obj.default); } )
}

