Автоматическое обновление v-data-таблицы при изменении данных магазина - PullRequest
Новая
       49

Автоматическое обновление v-data-таблицы при изменении данных магазина

0 голосов
/ 07 апреля 2019

Я работаю над приложением Nuxt.js, используя Vuetify и Nuxt.На одной из моих страниц отображается таблица со списком игр, в которые вы можете вступить.Моя цель - постоянно обновлять эту таблицу всякий раз, когда игры добавляются или удаляются из списка.

Поэтому в моем магазине я настроил следующее состояние и изменения: 

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>

Я пробовал эту конфигурацию, а также объявлял «игры» как вычисляемое свойство или объявлял метод «наблюдения».Ни в одном из этих случаев я не видел, чтобы таблица автоматически обновлялась при срабатывании любой из указанных выше мутаций (данные в хранилище обновляются правильно).

Каким будет правильный способ получить желаемое поведениемоего компонента?

1 Ответ

1 голос
/ 08 апреля 2019

Как я уже сказал в моем комментарии, вы должны использовать вычисляемое свойство для 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 и оставьте все остальное, должно работать нормально.

...