状态

Question

我想对服务器进行API调用以获取数据，然后将其显示在组件中。我有一个created()方法，该方法向我的商店调度一个操作，该方法又提交该变异以使用从服务器获取的数据来更新我的商店。我也有computed方法，在这里我只需调用getter即可从存储中获取数据。代码如下：

状态

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)
})

// getters

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"。但是，如果我单击“刷新”，它们看起来会很好。登录操作将我重定向到渲染该组件的页面。看起来，计算属性首先尝试通过getter从数组中获取数据，然后再将其实际填充到存储中。如何确保我的组件中包含对象数组？

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，这将解释为什么数组为空。这是我的遗留代码：）

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

状态

component.vue

store.js

2 个答案: