Vuex показывает объект в магазине, но компонент не может его получить

Question

Мне нужно вернуть объект currentGroup, чтобы запустить мою таблицу лидеров в VueJS.

Магазин Vuex показывает currentGroup, как и ожидалось. Однако Leaderboard видит currentGroup в магазине как «undefined»

Я пробовал использовать реквизиты, свойства данных и вычисленные значения для получения группы, но ничего из этого не сработало.

вот мой Компонент таблицы лидеров:

<template>
  <div class="table-responsive mt-3">
    <table class="ui celled table" v-if="currentGroup">
      <thead>
        ...
      </thead>
      <tbody class="fixed-height-600">
        <tr v-for="(leader) in leaderboard" :key="leader.users_id">
          ...
      </tbody>
    </table>
    <MissingComponent v-else>Leaderboard</MissingComponent>
  </div>
</template>

<script>
...
export default {
  name: "Leaderboard",
  data() {
 ...
  },
  computed: {
    leaderboard () {
      return this.$store.state.reports.leaderboard;
    },
    currentGroup () {
      return this.$store.state.currentGroup;
    }
  },
  async mounted () {
    await this.$store.dispatch('getUserGroups')
    this.getLeaderboard();
  },
  methods: {
    getLeaderboard: async function () {
      console.log('in LeaderBoard, this is currentGroup: ', this.$store.state.currentGroup.name) // this returns undefined
      this.$store.dispatch("updateLeaderboard", this.currentGroup);
    },
    moment: function (datetime) {
      return moment(datetime);
    }
  }
}
</script> 

вот мой магазин, где он должен быть назначен:

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'
import GroupsService from '@/services/GroupsService'
import * as acts from '../store/modules/acts.js'
import * as auth from '../store/modules/auth.js'
...

// import SubscriptionsService from './services/SubscriptionsService'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    acts,
    auth,
    ...
  },
  state: {
    currentGroup: {},
    location: {},
    comment: ''
  },
  mutations: {
    setCurrentGroup(state, group) {
      console.log('seting currentGroup to: ', group) // this works correctly
      state.currentGroup = group
    },
    set_location(state, place) {
      state.location = place;
    },
    set_comment(state, comment) {
      state.comment = comment;
    }
  },
  actions: {
    getUserGroups({ commit }) {
      GroupsService.getGroups()
        .then(resp => {
          console.log('in store getUserGroups, this is usergroups: ', resp);
          console.log('setting currentGroup as resp[0]: ', resp[0]) //this is correct
            commit('setCurrentGroup', resp[0]);
        });
    }
  },
  getters: {
    currentGroup: state => {
      return state.currentGroup;
    }
  }
})

Answer 1

Сделайте getUserGroups asyn c таким образом, чтобы ожидал этого. $ Store.dispatch ('getUserGroups') ожидает результатов:

async getUserGroups({ commit }) {
      const resp = await GroupsService.getGroups()
      console.log('in store getUserGroups, this is usergroups: ', resp);
      console.log('setting currentGroup as resp[0]: ', resp[0]) //this is correct
      commit('setCurrentGroup', resp[0]);
    }