Question

我想进入VueJs开发并创建一个简单的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道具时，它都会不断进行更新：

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}`;
      }
    }
  }
}

在Vuex存储中更新二维数组中的项目

1 个答案: