Vue watch не срабатывает при изменении значения данных на то же значение

Я создаю клон UNO, я использовал наблюдатель для выполнения кода при каждом запуске хода:

  watch: {
    // on turn change
    async turnId(val) {
      const isUserTurn = val === 0;

      if (isUserTurn) {
        // reset has drawed flag
        // this.hasDrawed = false;
      } else {
        await setTimeout(() => this.playAI(), 1000);
      }
    },
  },

когда это не очередь пользователя, этот код запускается:

await setTimeout(() => this.playAI(), 1000);

метод playAI:

    playAI() {
      // get the card and play it
      this.play(card)
    },
    play(card) {
      // play the card (delete from hand and put on piletop)

      this.nextTurn();

      if (card.value === '+4') {
        this.currentPlayer.hand.push(...this.draw(4));
        this.nextTurn();
      } else if (card.value === '+2') {
        this.currentPlayer.hand.push(...this.draw(2));
        this.nextTurn();
      } else if (card.value === 'skip') {
        this.nextTurn();
      }
    },
    nextTurn() {
      // if the turn id is greater than the total number of players then back it up
      if (this.turnId === this.playersNumber - 1) this.turnId = 0;
      else this.turnId += 1;
    },

Проблема в том, что когда ИИ разыгрывает такую ​​карту, как пропуск, он разыгрывает карту (пропускает), дважды запускает метод следующего хода (turnId + 2), но наблюдатель на повороте не запускается во второй раз, поэтому ИИ прекращает играть.

  • Эта ошибка возникает только при повороте ИИ, а не пользователя, поэтому я думаю, что ошибка исходит от наблюдателя.
  • Я тестирую его только с двумя игроками, поэтому, когда ИИ разыгрывает карту, например пропуск, ход возвращается к нему (он меняется, но возвращается с тем же значением, что и раньше), так что это может быть ошибка, так как когда метод перестает работать значение turnId такое же, как и до вызова функции

Если это ошибка, как я могу заставить наблюдателя работать?

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
0
0
1 403
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Наблюдатель выполняется только один раз в цикле событий, второй вызов следует выполнять асинхронно.


добавить

пример:

    play(card) {
      // play the card (delete from hand and put on piletop)

      this.nextTurn();
      setTimeout(() => {
        if (card.value === '+4') {
          this.currentPlayer.hand.push(...this.draw(4));
          this.nextTurn();
        } else if (card.value === '+2') {
          this.currentPlayer.hand.push(...this.draw(2));
          this.nextTurn();
        } else if (card.value === 'skip') {
          this.nextTurn();
        }
      }, 0)
    }

Таким образом, наблюдатель будет выполняться дважды, но это приведет к непредвиденным результатам, и вам нужно будет подумать, как настроить

Как мне это сделать?

Francesco Dorati 21.12.2020 13:32
Ответ принят как подходящий

Мне удалось решить эту проблему, изменив метод воспроизведения:

  play(card) {

    if (card.value === 'reverse') { // if card is reverse
      this.isReversed = !this.isReversed; // inverse reversed flag
    } else if (card.value === 'skip') { // if card is skip
      this.skipTurn = true; // set skip flag
    } else if (card.value === '+2') { // if card is +2
      this.nextPlayer.hand.push(...this.draw(2)); // nextPlayer draws 2
      this.nextPlayer.hand.sort(this.sortHandler); // sort the hand of the player who draws
      this.skipTurn = true; // set skip flag
    } else if (card.value === '+4') { // if card is +4
      this.nextPlayer.hand.push(...this.draw(4)); // nextPlayer draws 4
      this.nextPlayer.hand.sort(this.sortHandler); // sort the hand of the player who draws
      this.skipTurn = true; // set skip flag
    }

    // next turn
    this.nextTurn();
  }

  • Я создал вычисляемый nextPlayer, который делает то же самое, что и currentPlayer, но на следующем.
  • Я также создал флаг, который проверяет, должен ли следующий игрок пропустить ход, и проверил его в наблюдателе:
  turnId(turn) {
    if (this.skipTurn) {
      this.skipTurn = false;
      this.nextTurn();
      return;
    }

    if (turn !== 0) { // if it's bot's turn
      this.playAI();
    }
  },

Другие вопросы по теме