Vuex возвращает объект и undefined в одном и том же компоненте одновременно - PullRequest
Новая
       23

Vuex возвращает объект и undefined в одном и том же компоненте одновременно

0 голосов
/ 14 апреля 2020

In имеет компонент, который полагается на наличие объекта currentGroup для интерполяции строк, а также для вызова API.

Однако иногда строки интерполируются, как и ожидалось. Он отображает currentGroup.name, но currentGroup.points_horizon не отображается. Между тем, объект currentGroup, кажется, никогда не будет доступен для API. Все это началось, когда я пытаюсь реорганизовать свой магазин. js в модули.

Вот компонент: 

<template>
  <div class="table-responsive mt-3">
    <table class="ui celled table">
      <thead>
        <tr><th colspan="4">Leaderboard for {{ currentGroup.name }} (last {{ currentGroup.points_horizon }} days)</th></tr>
        <tr>
          <th id="home-step-1">Username</th>
          <!-- <th>Last Action</th>
          <th>Date</th> -->
          <th>Score</th>
        </tr>
      </thead>
      <tbody class="fixed-height-600">
        <tr v-for="(leader) in leaderboard" :key="leader.users_id">
          <td>
            <h4 class="ui image header">
              <img v-if="leader.avatar_url" :src="leader.avatar_url"  class="ui mini rounded image">
              <img v-else :src="'https://robohash.org/'+ leader.username" class="ui mini rounded image"/>
              <router-link :to="`/users/${leader.users_id}`" class="content">
                {{leader.username}}
              </router-link>
            </h4>
          </td>
          <!-- <td>{{ lastUserAct.deed }}</!-->
          <!-- <td></td> -->
          <!-- <td>{{ lastAct(leader.id).deed }}</td>
          <td>{{ moment(lastAct(leader.id).created_at).strftime("%A, %d %b %Y %l:%M %p") }}</td> -->
          <td>{{leader.count}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import moment from 'moment-strftime'
import _ from 'lodash'
import ActsService from '@/services/ActsService'
import { mapActions } from 'vuex'
export default {
  name: "Leaderboard",
  data() {
    return {
      lastUserAct: {}
    }
  },
  // props: {
  //   currentGroup: {
  //     type: Object,
  //     required: true
  //   }
  // },
  computed: {
    leaderboard () {
      return this.$store.getters.leaderboard;
    },
    currentGroup () {
      return this.$store.state.groups.currentGroup;
    }
  },
  async mounted () {
    await this.setCurrentGroup ();
    await this.getLeaderboard();
  },
  methods: {
    ...mapActions('groups', [
      'getUserGroups'
    ]),
    getLeaderboard: async function () {
      console.log('in LeaderBoard, this is currentGroup: ', this.currentGroup.name)
      if (this.currentGroup === null) {
        this.setCurrentGroup()
      }
      this.$store.dispatch("updateLeaderboard", this.currentGroup);
    },
    moment: function (datetime) {
      return moment(datetime);
    }
    ,
    async lastActByUser (leader_id) {
      console.log('in Leaderboard, getting last act for user')
      const response = await ActsService.fetchLastActByUser ({
        userId: leader_id
      });
      this.lastUserAct = response.data
      console.log('in Leaderboard, lastAct response: ', response.data)
    },
    async setCurrentGroup() {
      console.log('settingCurrent Group')
      this.$store.dispatch('groups/getUserGroups') 
    }
  }
};
</script>
...