Vue.js, VueX - не может отображать данные из API в компоненте
Я хочу сделать вызов API серверу, чтобы получить данные, а затем отобразить их в компоненте. У меня есть метод created(), который отправляет действие в мой магазин, который, в свою очередь, фиксирует мутацию, чтобы обновить мой магазин данными, которые я получил с сервера. У меня также есть метод computed, в котором я просто вызываю геттер, который извлекает данные из магазина. Код выглядит так:
штат
state: {
data: {
rides: []
}
}
component.vue
created() {
this.$store.dispatch('fetchUserRides');
}
computed: {
...mapGetters([
'userRides'
]),
}
store.js
// действия
fetchUserRides({ commit }) {
axios.get('/api/stats/current_week')
.then(response => {
commit('fetchUserRides', response)
})
.catch(error => {
commit('serverResponsError')
})
// мутации ...
fetchUserRides(state, payload){
let rides = payload.data
rides.forEach((item) => {
state.data.rides.push(item)
})
// геттеры
userRides: state => {
let rides = state.data.rides
rides.sort(( a, b) => {
return new Date(a.date) - new Date(b.date);
});
return rides
}
В ответ я получаю более 40 объектов, проверял по console.info(state.data.rides) и они есть на 100%.
Моя проблема в том, что когда я выхожу из системы и снова вхожу в систему, возникает ошибка "TypeError: Cannot read property 'sort' of null". Но если я нажму «Обновить», они будут выглядеть нормально. Действие входа перенаправляет меня на страницу, где я визуализирую этот компонент. Похоже, что вычисляемое свойство сначала пытается получить данные из массива до того, как оно будет фактически заполнено в хранилище. Как я могу убедиться, что у меня есть массив объектов в моем компоненте?
Ответы 2
Вероятно, вам нужно установить пустой массив ([]) в качестве начального значения для state.data.rides вместо null.
Другой вариант - проверить подлинность rides в ваших геттерах.
Что-то вроде:
if (rides) {
rides.sort(( a, b) => {
return new Date(a.date) - new Date(b.date);
});
}
return []
Забыл упомянуть, аттракционы уже инициализированы как пустой массив в магазине: state: { data: { rides: [] } }
Мне удалось решить свою проблему, но оказалось, что я совершил ошибку. Я совершенно забыл, что установил state.data.rides = null вместо пустого массива state.data.rides = null, что объясняет, почему массив был пуст. Это был старый код, который у меня был :)
Ваша догадка верна. Я бы попытался добавить еще несколько журналов консоли, чтобы получить представление о том, что происходит и в каком порядке. Таким образом, вы можете отлаживать глубину. Вы можете попытаться обернуть свой компонент оператором if, например
<template v-if = "data.rides.count"> ... </template>. Таким образом, ваш шаблон или компонент будет отображаться всякий раз, когда у вас есть заполненный массив данных.