ค้นหาเว็บไซต์

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