javascript - 如果不使用模板中的特定 vuex 状态,单击处理程序将不起作用

原文 标签 javascript vue.js vuex

我的 vue 组件中出现了一个非常令人困惑的错误;如果我从下面的代码中添加第 5 行,它会按预期工作,如果我删除它,每个 board-slot 的点击方法元素停止更改 boardSlots目的。

使用 {{currentPlayer}} 是什么意思和这个有关系吗?我没有在其他任何地方使用它。它不一定需要打印,只需要在模板定义中的某个位置,因此类绑定(bind)为 currentPlayer 的随机元素也奇迹般地使它工作。 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>

最佳答案

我不确定是什么{{currentPlayer}}特别与它有关,但是任何时候你修改组件的状态并且 View 没有更新,那么(假设在渲染过程中没有错误)它通​​常意味着:

  • 您正在以 Vue 无法观察到的方式改变状态。
  • 您的状态不是 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 问题无关。

    关于javascript - 如果不使用模板中的特定 vuex 状态,单击处理程序将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57719071/

    相关文章:

    javascript - 登录后Vue应用程序不使用本地存储(vue路由器)

    vuejs2 - “错误:[vuex]操作应该是具有“handler”功能的函数或对象,但在更新Vue和Vuex之后“actions.default”为{}”

    typescript - 使用 TypeScript 输入 Vue.js 3 的 Prop

    typescript - 将传单标记扩展名转换为 Typescript

    vue.js - 我有一个 Electron 项目,我想与它一起使用vueJS

    javascript - 等待查询实时更新然后返回值 [Vuex ,Firestore]

    javascript - 路由更改时对获取数据使用react

    javascript - 错误:this.element.uniqueId不是函数。 jQuery UI。有人看过吗?

    javascript - CKEDITOR getData()返回html字符实体(unicode),但是如何获得未翻译的字符?

    javascript - 具有匹配的Javascript正则表达式