Question

当我更新商店数组中的值时，界面不反映更改。

目标：我正在尝试显示一个简单的扫雷网格。一旦我点击一个单元格，附加到该单元格的对象应该将 isRevealed 更新为 true 以表示已显示并且Vuejs应该添加类挖掘到那个牢房。

工作原理：isRevealed切换为true。

什么工作：只使用道具一切正常，但尝试学习VueJS并包括Vuex存储UI不会再更新阵列。

结构：

App显示网格和网格显示多个单元格。

适用于Vuex的store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        GameGrid: [],
    },
mutations: {
    revealCell(state, cell) {
        state.GameGrid[cell.y][cell.x].isRevealed = true;
        console.log("revealCell ", cell);


    },
});

GameGrid包含以下内容： 10个10个对象的数组：

{
    isRevealed: false,
    x: 0,
    y: 0
    ...
}

grid.vue ，没什么特别的，显示每个单元格

<template>

    <div class="grid">
        <div v-for="row in $store.state.GameGrid" class="row">
            <app-cell v-for="col in row" :cell="col"></app-cell>
        </div>
    </div>

</template>

cell.vue ：

<template>
    <div
        @click="dig"
        :class="{dug: cell.isRevealed, dd: cell.debug}">
        <span class="text" v-html="cell.display"></span>
        <span class="small">{‌{ cell.code }}</span>
    </div>
</template>
<script>
    export default {
        props: {
            cell: {
                type: Object
            },
        },
        data: function() {
           return {
               display: null,
           }
        },
        methods: {
            dig() {
                this.$store.commit('revealCell', this.cell);
            },
    }
</script>

编辑accoridng到pirs回答：

Grid.vue文件

<template>

    <div class="grid">
        <div v-for="row in gameGridAlias" class="row">
            <app-cell v-for="col in row" :cell="col"></app-cell>
        </div>
    </div>

</template>

<script>
    import { mapState } from 'vuex';
    import Cell from './Cell.vue';
    export default {
        components: {
            'app-cell': Cell,
        },
        data: {
                gameGridAlias: []
        },
        methods: {

        },
        computed: mapState({
            gameGridAlias: state => state.GameGrid
        })

    }

</script>

请注意，由于The "data" option should be a function that returns a per-instance value in component definitions.未返回函数，因此出现data错误。

我设置isRevealed的函数虽然在cell.vue上。我仍然没有看到UI更新（除非我正在保存？）。使用console.log确认this.cell.isRevealed = true的单元格，但类中没有更改。

以下是我填充GameGrid的方法

当用户按下嗯，主页上的按钮时，此功能正在呼叫？ App.vue文件。

     generateGrid() {
          console.log("generateGrid");
          //Generate empty play grid
          for(let y = 0; y < this.$store.state.GameGridHeight; y++) {
              this.$store.state.GameGrid[y] = new Array();
              for(let x = 0; x < this.$store.state.GameGridWidth; x++) {
                  this.$store.state.GameGrid[y][x] = {
                      content: 'Empty',
                      code: 0,
                      isRevealed: false,
                      x: x,
                      y: y,
                      debug: false,
                  };
              }
          }
      }, //End generateGrid

Answer 1

在grid.vue中，您应该使用computed和mapState更新道具

就像是：

import { mapState } from 'vuex'

// ...

<div v-for="row in gameGridAlias" class="row">

// ...

computed: mapState({
  gameGridAlias: state => state.GameGrid
})

更多：https://vuex.vuejs.org/en/state.html#the-mapstate-helper

*注意：mapState是可选的，但您可以使用它来处理多个商店并且它非常强大，我会亲自将它用于所有情况。

修改：不要使用this.$store.state.GameGrid[y]或其他this.$store.state个变量但仅使用mapState别名才能使其正常工作

如何通知VueJS / Vuex数组中的值更改？

编辑accoridng到pirs回答：

以下是我填充GameGrid的方法

1 个答案: