Question

我想创建一个简单的“ Conway的生活游戏”应用程序，并将已经进行的设置存储到localStorage中。

我创建了三个视图

地图设置 |定义地图大小等。
地图设置 |为您的地图创建预设
地图启动 |启动您的预设

每当设置更改时，都必须删除该预设，因为该预设可能具有不同的旧大小。如果localStorage为空，则设置使用默认值。

在我的商店内，我将地图设置保存到grid属性中。因此，该值为null或localStorage中的二维数组。

当路由到 MapSetup.vue 文件时，我使用已挂载的事件来设置预设

  mounted: function() {
    if (this.grid) { // the preset from the store / localStorage
      this.currentGrid = this.grid; // use the preset
    } else {
      this.currentGrid = this.generateNewMap(); // generate a new preset
    }
  }

例如，

this.currentGrid的大小为50x50。我在这里创建了我的应用程序的工作示例

https://codesandbox.io/s/vuetify-vuex-and-vuerouter-h6yqu

您可以在 MapSettings.vue 中定义设置，并且mapSetup的grid状态应设置为null。重定向到 MapSetup.vue 后，不应显示任何网格，但是如果您调试this.currentGrid，则应该呈现一个二维网格。

为什么卡片仍然为空并且不会“绘制”网格？

Answer 1

实例化SetupRow中的SetupGrid.vue组件时缺少道具。 SetupRow需要以下道具，但row未通过：

props: {
  row: Array,
  rowIndex: Number
}

它应该看起来像这样（包括row道具）：

<SetupRow
  v-for="(row, rowIndex) in grid"
  :key="rowIndex"
  :row="row"
  :rowIndex="rowIndex"
  @rowClicked="onRowClicked"
/>

将来避免这种情况的一种方法是使用required属性定义道具，如下所示。如果道具未通过，将产生错误：

props: {
  row: {
    type: Array,
    required: true
  },
  rowIndex: {
    type: Number,
    required: true
  }
}

虽然属性已更改，但组件不会再次呈现

1 个答案: