Vue.js, VueX - невозможно отобразить данные из API в компоненте

Question

Я хочу сделать вызов 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.log(state.data.rides), и они там на 100%.

Моя проблема в том, что при выходе из системы и повторном входе в систему возникает ошибка "TypeError: Cannot read property 'sort' of null". Но если я нажму «Обновить», они будут в порядке. Действие входа перенаправляет меня на страницу, где я отображаю этот компонент. Это похоже на то, что вычисляемое свойство сначала пытается извлечь данные из получателя из массива, прежде чем он будет фактически заполнен в хранилище. Как я могу убедиться, что получаю массив объектов в моем компоненте?

Answer 1

Мне удалось решить мою проблему, и оказалось, что я ошибся.Я полностью забыл, что я установил state.data.rides = null вместо пустого массива state.data.rides = null, что объясняет, почему массив был пустым.Это был унаследованный код:)

Answer 2

Возможно, вам нужно установить пустой массив ([]) в качестве начального значения state.data.rides вместо null.

Другим вариантом будет проверка, что rides правдив в ваших добытчиках. Что-то вроде:

 if (rides) {
   rides.sort(( a, b) => {
     return new Date(a.date) - new Date(b.date);
   });
  }
  return []