在存储数据更改时自动更新 v-data-table答案

【问题标题】：Automatically updating v-data-table on store data change在存储数据更改时自动更新 v-data-table
【发布时间】：2019-08-28 22:36:11
【问题描述】：

我正在使用 Vuetify 和 Nuxt 开发 Nuxt.js 应用程序。我的一个页面显示了一个表格，其中显示了您可以加入的游戏列表。我的目标是在列表中添加或删除游戏时自动更新此表。

所以在我的商店中，我设置了以下状态和突变：

export const state = () => ({
  games: {}
})

export const mutations = {
  addGame(state, game) {
    state.games[game.id] = game
  },
  removeGame(state, id) {
    delete state.games[id]
  }
}

还有这个将游戏对象转换为列表的 getter，以便我的组件可以使用它：

export const getters = {
  games(state) {
    const games = []
    for (const key in state.games) {
      games.push(state.games[key])
    }
    return games
  }
}

现在我们有了组件的相关部分：

<template>
  <v-data-table
    :headers="headers"
    :items="getGames()"
    class="elevation-1"
  >
    <template v-slot:items="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-center">
        {{ props.item.players.length }}/{{ props.item.numberOfPlayers }}
      </td>
      <v-btn :disabled="props.item.nonJoinable" class="v-btn--left" @click="joinGame(props.item.id)">
        {{ props.item.nonJoinable ? 'Already joined': 'Join' }}
      </v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      games: [],
      headers: [
        {
          text: 'Game name',
          align: 'left',
          sortable: true,
          value: 'name'
        },
        {
          text: 'Players',
          align: 'center',
          sortable: true,
          value: 'players'
        }
      ]
    }
  },
  async fetch({ store, params }) {
    await store.dispatch('fetchGamesList')
  },
  methods: {
    joinGame(id) {
      this.$store.dispatch('joinGame', id)
    },
    getGames() {
      console.log(this.$store.getters.games)
      this.games = this.$store.getters.games
    }
  }
}
</script>

我已经尝试过这种配置以及将“游戏”声明为计算属性或声明“观看”方法。在任何一种情况下，只要触发上述任何突变（存储中的数据已正确更新），我都无法看到表格自动更新。

从我的组件中获得所需行为的正确方法是什么？

【问题讨论】：

它应该可以工作，你可以创建一个codesanbox或fiddle来演示问题吗？
你能在商店里展示你的行为吗？ getGames 应该是一个计算属性以反映存储中的更改，但正确提交更改取决于您的操作。
@Aldarund 我正在尝试使用代码和框，但我无法让 vuex 存储正常工作（无法读取 undefined 的属性 'dispatch' ）。我会再试一次，或者我会找到另一种方法来分享代码。
@Andrew1325 我在这里展示的突变不是由动作触发的，而是由我编写的 Vuex 插件触发的。每当添加或删除游戏时，此插件使用 websocket 从后端接收通知，并且只需执行以下操作：store.commit('addGame', data.game_added) 和 store.commit('removeGame', data.game_removed)。据我所见，突变被正确调用，状态也相应改变。事实上，当页面重新加载时，表格会正确显示更新后的游戏列表。唯一的问题是它不会被动地（不刷新）。

标签： vue.js websocket vuex vuetify.js nuxt.js

【解决方案1】：

正如我在评论中所说，您应该为getGames 使用计算属性，但您可以在其中使用mapGetters。因此，如果您的商店正在更新，那么这应该可以工作：

//your component
<template>
  <v-data-table
    :headers="headers"
    :items="games"
    class="elevation-1"
  >
    ... //rest of the template code
  </v-data-table>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      headers: [
        // your headers objects
      ]
    }
  },
  computed: {
    ...mapGetters({
      games
    }),
  },
  ... //rest of scripts but without getGames method
</script>

所以删除你的 getGames 方法并保留其余的，应该可以正常工作。

【讨论】：