NuxtJS 页面创建了两次

Question

我目前在NuxtJS中面临一个问题，其中一个方法被调用两次，因此请求被发送两次。

这发生在一个页面中并且被调用两次的方法被创建()。

我使用如下参数打开页面：

http://localhost:3000/mypage?token=123123123

在页面的 created() 方法中，我调用了商店调度。

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() 被调用两次？

Answer 1

created() 和 beforeCreate() 是两个生命钩子，在服务器端和客户端都被调用。（您也会在终端中看到一个控制台日志，因为服务器正在触发 i）

如果你想这样做一次，你可以：

a) 使用mounted() 钩子

b) 如果操作需要在安装之前完成，您必须在 created 方法中使用 if 语句process.client。此 if 语句将检查您是否在客户端（浏览器端），如果是，请执行操作

created(){
  if(process.client){
    //...your action here
  }
}