@NoFunX
frontend-разработчик

Почему данные из API перестают отображаться после перезагрузки страницы?

Во Vuex получаю массив данных из API и отображаю их в компоненте charts.vue. Реактивно они отображаются, но после перезагрузки страницы все исчезает, а в консоли ошибка: [Vue warn]: Error in data(): "TypeError: Cannot read property 'data' of undefined". В чем может быть проблема?

PS: Во Frontend-разработке новичок

VUEX:

export default new Vuex.Store({
    state: {
        data: []
    },
    mutations: {
        SET_DATA: (state, values) => {
            state.data = values
        },

    },
    actions: {
        GET_DATA({commit}) {
            return axious.get('https://test-task-for-frontend.herokuapp.com/data')
        .then(response=>{
            commit('SET_DATA', response.data.items)
        })
        }
    },
    getters: {
        DATA(state) {
            return state.data
        },
},
 })


CHARTS.VUE:
<template>
    <div>
    <highcharts :constructorType="'stockChart'" class="hc" :options="chartOptions" ref="chart"></highcharts>
  </div>
</template>


<script>
import {mapActions, mapGetters} from 'vuex'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts)
export default {
  props: {
    request: {}
  },
 data() {
  return {
    title: '',
    points: [10, 0, 8, 2, 6, 4, 5, 5],
    chartType: 'Spline',
    seriesColor: '#6fcd98',
    colorInputIsSupported: null,
    chartOptions: {
      rangeSelector: {
        verticalAlign: 'bottom',
        x: 0,
        y: 0,

        
},
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Statistic'
      },
      yAxis: {
        title: {
                    text: 'VALUE'
                },
        
      },
      xAxis: {
        title: {
                    text: 'DATE'
                },
        categories: []
      },
      legend: {
        
      },
      series: [{
        name: 'queries',
        data: this.request[0].data.map(e=>e.value)
      },
      
      {
        name: 'groups',
        data: this.request[1].data.map(e=>e.value)
      },

      {
        name: 'documents',
        data: this.request[2].data.map(e=>e.value)
      },

      {
        name: 'categories',
        data: this.request[3].data.map(e=>e.value)
      }
      ]
    }
  }
},

  computed: {
    ...mapGetters([
      'DATA'
    ])
  },
  methods : {
    ...mapActions([
      'GET_DATA', 
      ]),

    
  },
  mounted() {
    return this.GET_DATA()
  },
  }
</script>

APP.VUE

<template>
  <div>
    <charts :request="DATA"
    />
    <v-table
      :request_data="DATA"
    />
  </div> 
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import VTable from './components/v-table'
import Charts from './components/charts'

export default {
  
  components: {
    VTable, Charts
  },
  computed: {
    ...mapGetters([
      'DATA'
    ])
  },
  methods : {
    ...mapActions([
      'GET_DATA'
      ]),

    
  },

  mounted() {
    return this.GET_DATA()
    
  }
  
  }
</script>
  • Вопрос задан
  • 435 просмотров
Пригласить эксперта
Ответы на вопрос 2
@ashfedor
Пропиши в mounted() запуск екшена SET_DATA
вообще конечно нужен и код самого компонента
Ответ написан
fallus
@fallus
А в геттере DATA что? Массив или объект?

Думаю дело в самом графике.
Стоит вжмакать директиву :key и v-if тоже
<highcharts v-if="DATA.length" :key="DATA.length" :constructorType="'stockChart'" class="hc" :options="chartOptions" ref="chart"></highcharts>


Чтобы после изменения длины массива DATA (когда данные появились), график перерендерирорироваривался.
И чтобы показывался, когда данные вообще, в принципе есть.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы