有这么一段代码：
<template>
<div class="wrapper">
</div>
</template>
<script>
import axios from 'axios';
export default{
created () {
console.log('222');
this.getTrackerIdData();
this.getTrackerData();
},
methods: {
getTrackerIdData () {
return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking_new.create" , {
})
.then(response => {
this.$store.commit('tracker/setTrackingKeyId', response.data.data.tracking_new_key_id);
this.$store.commit('tracker/setQrCodeUrl', response.data.data.filename_qr_code_tracking_new);
})
.catch(function (error) {
console.log(error);
});
},
getTrackerData () {
setInterval(()=>myTimer(this), 60000);
function myTimer(th) {
return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$store.state.tracker.trackingKeyId , {
})
.then(response => {
th.$store.commit('tracker/setTrackingServerData', response.data.data.tracking_data);
})
.catch(function (error) {
console.log(error);
});
}
},
}
}
</script>
在项目中启动这样的解决方案时，服务器端开发人员告诉我，至少请求方法getTrackerIdData ()它的一侧可以工作两次！
放置代码后（console.log ('222');) 的钩子中created生命周期（方法调用的地方），我发现它在firebug中显示了两次：
问题：
为什么会发生这种情况？从从服务器接收数据的实现的角度来看，在这种情况下什么方法是正确的？
附：如果一切都被调用mounted钩子，那么代码就可以工作，包括在服务器端，只有 1 次。
重要的是要知道，在任何 Vue 实例生命周期中，只有 beforeCreate 和created 钩子会从客户端和服务器端调用。所有其他挂钩仅从客户端调用。
这就是为什么创建的钩子调用了两次并执行console.log('222'); twice
作为参考，您可以阅读here https://nuxtjs.org/guide/plugins
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
