обновить элемент в двумерном массиве в магазине Vuex

Question

Я хотел бы заняться разработкой VueJ и создать простую игру Minesweeper. Двумерная сетка управляется состоянием Vuex.При нажатии на ячейку я хотел бы открыть ее, чтобы мой текущий код был

  [MutationTypes.REVEAL_CELL]: (state, { rowIndex, columnIndex }) => {
    state.board[rowIndex][columnIndex].isRevealed = true;
  }

К сожалению, это не влияет на пользовательский интерфейс.Эта проблема известна и описана здесь

https://vuejs.org/v2/guide/list.html#Caveats

Документы сказали мне использовать что-то вроде этого

import Vue from "vue";

  [MutationTypes.REVEAL_CELL]: (state, { rowIndex, columnIndex }) => {
    const updatedCell = state.board[rowIndex][columnIndex];
    updatedCell.isRevealed = true;

    Vue.set(state.board[rowIndex], columnIndex, updatedCell);
    Vue.set(state.board, rowIndex, state.board[rowIndex]);
  }

, но это не помогло.Наконец, я попытался создать копию платы, изменить значения и назначить эту копию доске.

  [MutationTypes.REVEAL_CELL]: (state, { rowIndex, columnIndex }) => {
    const newBoard = state.board.map((row, mapRowIndex) => {
      return row.map((cell, cellIndex) => {
        if (mapRowIndex === rowIndex && cellIndex === columnIndex) {
          cell = { ...cell, isRevealed: true };
        }
        return cell;
      });
    });

    state.board = newBoard;
  }

Это тоже не сработало.У кого-то есть идея?

Я создал Codesandbox, показывающий мой проект

https://codesandbox.io/s/vuetify-vuex-and-vuerouter-d4q2b

, но я думаю, что единственный соответствующий файл - / store / gameBoard /mutations.js и функция REVEAL_CELL

Answer 1

Проблема в Cell.vue, и проблема в том, что вы проверяете неизменную переменную, чтобы определить состояние раскрытия.Вы абстрагировали this.cell.isRevealed в переменную с именем isUnrevealed, которой никогда не говорят, как измениться после начальной загрузки.

Опция 1

isUnrevealedкак ненужная вспомогательная переменная.Если вы избавитесь от isUnrevealed и измените ссылки на него на !cell.isRevealed, код будет работать должным образом.

Опция 2

Если выиспользуйте эту переменную, измените ее на вычисляемую, чтобы она постоянно обновлялась, когда состояние Vuex передает изменение в cell isRevealed prop:

computed: {
  isUnrevealed() {
    return !this.cell.isRevealed;
  }
}

Если вы идете по этому пути,не забудьте удалить свойство из data и удалить присвоение в mounted (первая строка).

---

У вас также будет такая же проблема с isMine и cellStyle.Итак, полностью удалите data и mounted и сделайте так, чтобы они оба вычислялись.

computed: {
  isMine() {
    return this.cell.isMine;
  },
  cellStyle() {
    if (!this.cell.isRevealed) {
      return "unrevealedCell";
    } else {
      if (this.isMine) {
        return "mineCell";
      } else {
        let neighbourCountStyle = "";
        ... // Switch statement
        return `neutralCell ${neighbourCountStyle}`;
      }
    }
  }
}