Nuxt JS Страница создается дважды

Question

В настоящее время я сталкиваюсь с проблемой в Nuxt JS, когда метод вызывается дважды , и поэтому запрос отправляется дважды.

Это происходит на странице , и метод, который вызывается дважды, это создал ().

Я открываю страницу с параметром , например:

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

И в методе create () страницы я вызываю диспетчерскую магазина.

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

Проблема в том, что это одноразовый токен, что означает, что он недействителен после одного использования. Таким образом, после второго звонка успех запроса больше не будет.

Почему страница, созданная дважды или созданная (), вызывается дважды?

Answer 1

Вот как это работает:

Nuxt. js запускает created() один раз на стороне сервера, затем на стороне клиента.

Nuxt SSR показывает console.log сообщение вашего сервера, а второе console.log - это сообщение на стороне клиента.

У вас есть 2 варианта:

Запустите это на стороне сервера:

Заверните его в :

   if(process.server){
   }

Или запустите его один раз на стороне клиента:

   if(!process.server){
   }

Answer 2

create () и beforeCreate () - это два жизненных цикла, которые вызываются как на стороне сервера, так и на стороне клиента. (вы также увидите один консольный журнал в вашем терминале, потому что сервер запускает i)

Если вы хотите сделать это один раз, вы можете:

a) использовать mount () hook

b) если действие должно быть выполнено раньше, чем смонтировано, вы должны использовать оператор if внутри созданного метода process.client. В этом случае оператор проверит, находитесь ли вы на стороне клиента (на стороне браузера), если это так, выполните действие

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