更新 Vuex 商店中二维数组中的项目

Question

我想进入VueJs开发并创建一个简单的扫雷游戏。二维网格由Vuex状态管理。单击单元格时，我想显示它，因此我当前的代码是  [MutationTypes.REVEAL_CELL]: (state, { rowIndex, columnIndex }) => {    state.board[rowIndex][columnIndex].isRevealed = true;  }不幸的是，这对 UI 没有影响。这个问题是已知的并在此处描述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 isRevealedprop时它会不断更新自身：

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

      }

    }

  }

}