Vuex Getters возвращаются как неопределенные - PullRequest
Новая
       45

Vuex Getters возвращаются как неопределенные

0 голосов
/ 31 января 2019

У меня проблема с геттерами Vuex, когда гиттеры возвращаются как неопределенные (в консоли Vue Dev, и в консоли Chrome Dev не регистрируются ошибки).

Если mapGetters() закомментировано (например,приведенный ниже пример кода), возвращенные данные отображаются на экране -> если пользователь нажимает на ссылку, содержащую данные.Данные НЕ будут отображаться, если пользователь заходит в приложение непосредственно в том месте, где должны отображаться данные.

Существует аналогичный вопрос , но нет принятого ответа

Журналы консоли Vue:

СОСТОЯНИЕ:

$ _ lgdHRS: Объект

Всего: 129

ПИСЬМА:

$ _ lgdHRS / totHrs: не определено

SomeContainer.vue 

<script>
import store from '../../_store'
import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState('$_lgdHRS',{
      totHrs : 'totHrs',
    }),

  // ...mapGetters('$_lgdHRS',{
  //    totHrs  : 'totHrs',
  //    airHrs  : 'airHrs',
  //    picHrs  : 'picHrs',
  //    pmcHrs  : 'pmcHrs',
  //    voHrs   : 'voHrs',
  //    trngHrs : 'trngHrs'
  // }),
  },

  created() {
    this.storeKey = '$_lgdHRS';
      if (!(this.storeKey in this.$store._modules.root._children)) {
        this.$store.registerModule(this.storeKey, store);
    }
  },

  mounted() {
    this.$store.dispatch('$_lgdHRS/getLogSummary');
  },
}
</script>
<template>
    <total-summary :hours="totHrs" />
</template>

state.js 

export const state = {
  totHrs: Number,
}

getters.js 

const totHrs = state => state.totHrs;
export default {
  totHrs,
};

mutations.js 

const
TOTAL_HRS_UPDATED = (state, totHrs) => {
  state.totHrs = +totHrs;
};
export default {
    TOTAL_HRS_UPDATED,
};

Ответы [ 2 ]

0 голосов
/ 31 января 2019

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

Пример: 

// NESTED VARS
const r = response
      totHrs  = r.total,
      airHrs  = r.airborne,
      picHrs  = r.PIC,
      pmcHrs  = r.PMC,
      voHrs   = r.VO,
      trngHrs  = r.training;

// CHANGE TO:
const r = response
const totHrs  = r.total
const airHrs  = r.airborne
const picHrs  = r.PIC
const pmcHrs  = r.PMC
const voHrs   = r.VO
const trngHrs = r.training

Я не знаю достаточно, почему, но ваш комментарий будет высоко оценен в комментариях.

0 голосов
/ 31 января 2019

Скорее всего, потому что вы только что отправили запрос в смонтированном виде, и до того, как данные были установлены в переменную состояния, отображается ваш компонент.Следовательно, вы можете попробовать использовать async await как в монтированных, так и в действиях магазина.Перейдите по следующей ссылке и проверьте последний пример в этом.https://vuex.vuejs.org/guide/actions.html

...