NuxtJS 页面被创建了两次

Posted 2023-02-22

【中文标题】NuxtJS 页面被创建了两次

【英文标题】：NuxtJS Page is created twice

【发布时间】：2020-06-10 04:18:51

【问题描述】：

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

这发生在页面中，被调用两次的方法是created()。

我使用 参数 打开页面，例如：

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

并且在页面的 created() 方法中我调用了一个 store dispatch。

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
      )
    
  ,

token 是通过 data 属性解析的：

data() 
    return 
      token: this.$nuxt.$route.query.token
    
  ,

这样做的问题是它是一次性令牌，这意味着它在使用一次后无效。因此，在第二次调用之后，请求不再成功。

为什么页面被创建了两次或者 created() 被调用了两次？

【问题讨论】：

查看此链接***.com/questions/60199338/…

【参考方案1】：

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

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

a) 使用mounted() 钩子

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

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

【参考方案2】：

这就是它的工作原理：

Nuxt.js 在服务器端运行一次created()，然后在客户端运行。

Nuxt s-s-r 显示您服务器的console.log 消息，第二个console.log 是客户端的消息。

您有 2 个选项：

在服务器端运行：

把它包起来：

   if(process.server)
   

或者在客户端运行一次：

   if(!process.server)