需求
- 在vue组件中需要调用的函数方法名是相同的(接口相同),但是按照页面不同需要导入不同JS文件 。如下:
然而上面这种写法肯定是行不通的,但表达的需求很明确。根据menuId的不同从JS文件中获取方法
解决方案
- promise方式:
const menuId = store.getters.getMenuId;let circuitInit =menuId > 2? import("../assets/js/loadCircuit"): import("../assets/js/initCircuit");// 调用circuitInit.then(fn => {let { saveFile, loadList, deleteList, loadFile } = fn;saveFile();});
- async await 方式
async created() {const menuId = store.getters.getMenuId;this.circuitFn =menuId > 2? await import("../assets/js/initCircuit"): await import("../assets/js/loadCircuit");},// 调用const { saveFile, loadList, deleteList, loadFile } = this.circuitFn;saveFile();
最终实现需求,虽然接口相同,但却是来自不同JS文件中的方法