Во 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>
