vue.js - NuxtJS 页面被创建了两次
问题描述
我目前在NuxtJS中面临一个问题,其中一个方法被调用了两次,因此请求被发送了两次。
这发生在一个页面中,并创建了两次调用的方法()。
我用如下参数打开页面:
http://localhost:3000/mypage?token=123123123
在页面的 created() 方法中,我调用了 store 调度。
created() {
if (this.token === undefined || this.token === null) {
this.$router.push('/login')
} else {
console.log('called created() and sent dispatch')
this.$store.dispatch('thirdPartyLogin', {
token: this.token
})
}
},
令牌通过 data 属性解析:
data() {
return {
token: this.$nuxt.$route.query.token
}
},
这样做的问题是它是一次性令牌,这意味着它在使用一次后无效。因此,在第二次调用之后,请求不再成功。
为什么页面被创建了两次或 created() 被调用了两次?
解决方案
created() 和 beforeCreate() 是两个生命钩子,在服务器端和客户端都被调用。(您也会在终端中看到一个控制台日志,因为服务器正在触发 i)
如果你想这样做一次,你可以:
a) 使用mounted() 钩子
b)如果需要在挂载之前完成操作,则必须在 created 方法中使用 if 语句process.client
。此 if 语句将检查您是否在客户端(浏览器端),如果是,请执行操作
created(){
if(process.client){
//...your action here
}
}
推荐阅读
- javascript - 重构 nodejs 模块
- css - Antd 黑暗主题覆盖了我自己的 css。如何解决?
- javascript - 单选按钮 onChange 事件
- neo4j - 密码查询以将图形作为对象返回,其中每个父节点都包含其子节点的数组?
- kubernetes - microk8s 中的 Traefik 总是 404 通过 HTTPS
- ios - 如何在 AppDelegate 中初始化 Core Data 的持久化容器并在整个应用程序中使用它?
- c++ - C++:实现 ln(a) 的数值逼近
- python - VBA运行python脚本 - 权限错误
- python - 根据等于熊猫数据框中特定值的列定位最小日期?
- python - 在将字符串添加到电子邮件时获取 \n