Question

使用webpack vue模板和vuex.I我的商店中有一个变异

const mutations = {
addWeekDataList(state, a) {
    state.weekDataList = a;
},}

在组件内的ajax请求中提交

axios.get('URL').then(function (response) {
let weekDataList = _.values(response);
that.$store.commit('addWeekDataList', weekDataList);});

然后我在商店里有一个吸气剂

const getters = {
getWeekRunData: state => {
    return state.weekDataList[state.currentWeek].filter(activity => activity.type === 'Run' );
},
}

在组件的计算属性

中调用

computed: {
    weekRunDataTime: function() {
        return Utils.convertSecsToHrsMins(Utils.addFields(this.weekRunData, 'moving_time'));
    },
    ...mapGetters({
        weekRunData: 'getWeekRunData',
    }),
},

到目前为止没有错误，计算属性在准备好后返回数据。但是，只要我在组件模板中执行以下操作，就会出现错误...

{{ weekRunDataTime }}
TypeError: state.weekDataList[state.currentWeek] is undefined

计算属性，然后是{{weekRunDataTime}}，最终会渲染，但错误最初仍会显示，我该如何解决这个问题？确保只有在数据可用后才能运行getter？

Answer 1

错误是因为state.weekDataList未加载，因此state.weekDataList[0]未定义。我遇到了两个解决方案，其中一个来自@AmreshVenugopal。一种是将样本数据集添加到数组中，第二种，最优选的是将一个if语句添加到getter中，以便只在加载数据时加载它。现在一切都很好，没有任何错误。

const getters = {
getWeekRunData: state => {
    if(state.weekDataList.length) return state.weekDataList[state.currentWeek].filter(activity => activity.type === 'Run' );
}}

Answer 2

添加初始数据将解决该问题

const state = {
      user: something
    };

状态渲染之前Vue.js / vuex getters错误

2 个答案: