更新 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，该变量在初始加载后从未被告知如何更改。选项1isUnrevealed似乎是一个不必要的便利变量。如果您摆脱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}`;      }    }  }}