状态渲染前的 Vue.js/vuex getters 错误答案

【问题标题】：Vue.js/vuex getters error before state rendered状态渲染前的 Vue.js/vuex getters 错误
【发布时间】：2017-08-30 07:51:27
【问题描述】：

使用 webpack vue 模板和 vuex。我的商店中有一个突变

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 仅在数据可用时运行？

【问题讨论】：

什么是state？通常访问 vuex store 之类的 this.$store.state... 是语法。
嗨@AmreshVenugopal state 在getter 和mutation 在store 里面，所以可以直接引用。
抱歉，我在阅读问题时犯了一个大错误。 state.weekDataList 的默认值是多少？
您已经注意到它失败了，因为还没有加载数据。如果没有数据，您可以使用 if else 或三元组来阻止代码执行。
我将其添加为记录的答案

标签： vue.js vuex

【解决方案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' );
}}

【讨论】：

【解决方案2】：

添加初始数据将解决问题

const state = {
      user: something
    };

【讨论】：