Javascript 更新Vuex存储区内二维数组中的项

我想进入VueJs开发，并创建了一个简单的扫雷游戏。二维网格由Vuex状态管理。当点击一个单元格时，我想显示它，所以我的当前代码是

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

不幸的是，这对UI没有影响。这里已经知道并描述了这个问题

医生让我用这样的东西

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

这也没用。有人有主意吗

我创建了一个代码沙盒来显示我的项目

---

但是我认为唯一相关的文件是/store/gameBoard/mutations.js，函数discover\u CELL问题在于

CELL.vue

中，问题是您正在检查一个不变的变量以确定discover的状态。您已经将

this.cell.isRevealed

抽象为一个名为

isUnrevealed

的变量，该变量在初始加载后从未被告知如何更改

选项1

isUnrevealed

似乎是一个不必要的方便变量。如果您删除了

isUnrevealed

，并将对它的引用更改为

！cell.isrevaled

，代码将按预期工作

选项2

如果设置为使用此变量，请将其更改为计算变量，以便每当Vuex状态将更改传播到

单元格时，它会不断更新自身

计算：{
isUnrevealed（）{
return！this.cell.isrevaled；
}
}

如果按此方法操作，请不要忘记从
数据中删除属性，并删除
装入的
（第一行）中的分配


您还将遇到与
isMine
和
cellStyle
相同的问题。因此，完全删除
数据
和
挂载
，并同时计算它们

计算：{
伊斯明（）{
返回此.cell.isMine；
},
cellStyle（）{
如果（！this.cell.isrevaled）{
返回“unrevealedCell”；
}否则{
如果（这是我的名字）{
返回“mineCell”；
}否则{
让我们来看看风格=”；
…//开关语句
返回'neutralCell${NeightourCountStyle}'；
}
}
}
}
您可以发布您在中使用Vuex的组件代码吗？我刚刚创建了一个沙盒：）看起来网格没有对状态更改做出反应。。不知道为什么-仍在搜索即使我通过Vue开发工具强制执行
提交
，它也不会显示单元格。。。非常有趣的问题…def似乎“线路板”更改没有进入必要的组件。。为什么不直接处理来自单元组件的单元点击而不是像那样发出事件呢？把这个放在这里是为了可见性OP-请标记Dan的答案是正确的-他是解决这个问题的人-我所做的只是复制和粘贴Dan说的…很好的发现！这让我很好奇。。。所以我测试了选项1——除了每当点击一个炸弹或中性单元格（样式不会改变——样式只会改变被点击的单元格）时，它都能正常工作。。我正试图弄明白为什么会发生这种事。。。有什么建议吗？看起来像是
Grid.vue
没有对线路板更改做出反应。。（如果单击一个炸弹或中性单元格，需要同时显示多个单元格-它们仍然显示，只是样式不正确）@MattOestreich-谢谢。这是因为样式从未被告知要更改——
mounted
中的所有代码在加载组件时只运行一次。为了解决这个问题，他可以创建另一个computed来确定类，并将所有相关代码从
挂载的
移动到其中。我将装载的代码转换为函数，并在装载期间以及单击单元格时调用它。我想我明白你的意思了。是否需要将
单元格.style
更改为计算属性，以便它对更改作出反应？谢谢你的意见。我会试着从这里弄明白。感谢您的回复@马托斯特里希-没问题。我只是编辑了我的答案，以表明我希望我能不止一次地投票给你lol-我希望OP会给你这方面的信用，并选择你的答案作为接受的答案。哦……还有。。。继续，你的劳动lol-它的工作完美无瑕。我不知道为什么我让
Vuex
阻塞了我的思路。。。啊。。。无论如何，你帮我学到了一些东西，我很感激！干杯