NuxtJS 页面创建了两次

Question

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

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

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

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() {
  return {
    token: this.$nuxt.$route.query.token
  }
},

这个的问题是它是One Time Token，也就是说用了一次就失效了。所以在第二次调用之后，请求不再成功。

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

Answer 1

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

如果你想做一次你可以:

a) 使用 mounted() 钩子

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

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

Answer 2

这是它的工作原理：

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

第一个Nuxt SSR显示的是你服务器的console.log消息，第二个console.log是客户端的消息。

您有 2 个选项：

运行服务器端：

将其包装在：

   if(process.server){
   }

或运行它在客户端一次：

   if(!process.server){
   }

NuxtJS 页面创建了两次

NuxtJS Page is created twice

vue.js

server-side-rendering

nuxt.js