亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

更新 Vuex 商店中二維數組中的項目

更新 Vuex 商店中二維數組中的項目

開滿天機 2021-06-22 17:08:35
我想進入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
查看完整描述

1 回答

?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

問題在于,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}`;

      }

    }

  }

}


查看完整回答
反對 回復 2021-06-24
  • 1 回答
  • 0 關注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號