Question

我正在使用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]
  }
}

以及将该游戏对象转换为列表的吸气剂，以使其可由我的组件使用：

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>

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

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

Answer 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方法并保留其余的内容，应该可以正常工作。

在商店数据更改时自动更新v-data-table

1 个答案: