Vue.js，VueX - 无法从组件中的API渲染数据

Question

我想对服务器进行API调用以获取数据，然后在组件中显示它们。我有一个created()方法，它将一个动作发送到我的商店，然后，该方法将突变用我从服务器获取的数据提交给我的商店。我也有computed方法，我只需调用getter从商店获取数据。代码如下所示：

state

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。

另一种选择是检查rides是否在你的吸气剂中是真实的。就像是：

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

Answer 2

我能够解决我的问题，结果我犯了一个错误。我完全忘了我设置state.data.rides = null而不是空数组state.data.rides = null，这可以解释为什么数组是空的。这是我遗留的遗留代码:)