在 VUE中,动态加载JS文件
需求在vue组件中需要调用的函数方法名是相同的(接口相同),但是按照页面不同需要导入不同JS文件 。如下:然而上面这种写法肯定是行不通的,但表达的需求很明确。根据menuId的不同从JS文件中获取方法解决方案promise方式:const menuId = store.getters.getMenuId;let circuitInit =menuId >...
·
需求
- 在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文件中的方法
更多推荐
已为社区贡献6条内容
所有评论(0)