javascript - 如果不在模板中使用特定的 vuex 状态，单击处理程序将无法工作

Question

一个非常令人困惑的错误正在潜入我的 vue 组件中；如果我从下面的代码中添加第 5 行，它会按预期工作，如果我删除它，每个 board-slot 元素的 click 方法将停止更改 boardSlots 对象。

使用 {{currentPlayer}} 与此有什么关系？我没有在其他地方使用它。它不一定需要打印，只需要位于模板定义中的某个位置，因此具有 currentPlayer 类绑定(bind)的随机元素也奇迹般地使其工作。 Vuex 的架构有什么我遗漏的吗？

<template>
    <div id="board-container">

    //THIS LINE 
    {{currentPlayer}}

        <div id="board">
            <div class="board-row" v-for="i in boardSlots">
                <div class="board-slot"
                    v-for="boardSlot in i"
                    :class="[{checked: (boardSlot.owner != 0)}, 'ownedBy-player-' + boardSlot.owner]"
                    @click="checkSlot(boardSlot.row, boardSlot.col)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { mapState, mapActions } from 'vuex';

export default{
    created(){
        for(var i = 0; i < 6; i++){
            this.boardSlots[i] = [];
        }

        var row = 0;
        var col = 0;

        for(var i = 1; i <= 42; i++){
            this.boardSlots[row].push({
                owner: 0,
                hover: false,
                row: row,
                col: col,
            });

            col++;

            if (col == 7) {
                col = 0;
                if (row < 5) {
                    row++;                  
                }
            }

        }
    },

    data(){
        return {
            boardSlots: [],
        }
    },

    computed: {
        ...mapState([
            'currentPlayer',
        ]),
    },

    methods: {
        ...mapActions([
            'swapToNextPlayer',
        ]),

        checkSlot(row, col){
            if (this.boardSlots[row][col].owner == 0) {
                this.boardSlots[row][col].owner = 1;
                this.swapToNextPlayer();
            }
        }
    }
}


</script>

Answer 1

我不确定 {{currentPlayer}} 具体与它有什么关系，但是任何时候你修改组件的状态并且 View 没有更新，那么(假设没有渲染期间出错)通常意味着:

1. 您正在以 Vue 无法观察到的方式改变状态。
2. 您的状态不是 react 性的，这可能是由于上一点而发生的。

这是一个危险信号:

this.boardSlots[i] = [];

Vue 无法检测对这样的数组元素的赋值(请阅读 Array Change Detection )。您需要使用 splice() 或 push() 让 Vue 知道它。或者，您也可以在局部变量中构造 boardSlots 数组，然后将其分配给最后的 this.boardSlots:

const boardSlots = [];

// Initialize boardSlots ...

this.boardSlots = boardSlots;

此外，您还以一种奇怪的方式渲染行和槽；您不应该在渲染期间改变任何状态，无论是本地状态还是其他状态(--i)。只需这样做:

<div class="board-row" v-for="slots of boardSlots">
    <div class="board-slot"
        v-for="slot of slots"
        :class="[{checked: (slot.owner != 0)}, 'ownedBy-player-' + slot.owner]"
        @click="checkSlot(slot.row, slot.col)">
    </div>
</div>

但这可能与您的 react 性问题没有任何关系。