基于PyWebview与Selenium的智慧树脚本系统踩坑开发日志（四）—— 解决vue3钩子函数mounted初始化问题

vue3钩子函数mounted初始化问题(2024-6-22)

原来代码：

mounted() {
    this.$nextTick(() => {
        this.fetchUserInfo(); // 确保 DOM 完全更新后调用
    });
},

async fetchUserInfo() {
    try {
        const userInfoList = await req_api.getUserInfo(); 
        this.userInfoList = userInfoList
        this.userInfo = userInfoList[this.userIndex]; 
        // alert("用户信息已更新:", this.userIndex);
        alert(this.userInfoList)
    } catch (error) {
        alert("",this.userInfoList);
    }
}

另一个用于封装接口的js文件

getUserInfo: function() {
    alert("GetUserInfo called");  // 添加日志
    return pywebview.api.get_userinfo().then((response) => {
        alert("UserInfo fetched:", response);
        return JSON.parse(response);
    }).catch((error) => {
        alert('Failed to get user info:', error);
        throw error;
    });
}

这样写一直会有问题，初始化往往只能到弹出“GetUserInfo called”的提示框，后面任意一条分支都无法打印，后面才理清楚，python启动的服务可能慢于vue3渲染成功的时间，一定要加上监听事件才行

后续代码

mounted() {
    window.addEventListener('pywebviewready', this.handlePywebview, true);
},
beforeDestroy() {
        window.removeEventListener('pywebviewready', this.handlePywebview, true);
 },
methods: {
    handlePywebview() {
        // 这里可以放入 pywebview 就绪后执行的方法
        alert("pywebview is ready");
        this.fetchUserInfo();
    },
}