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

Posted 2023-02-23

【中文标题】状态渲染前的 Vue.js/vuex getters 错误

【英文标题】：Vue.js/vuex getters error before state rendered

【发布时间】：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 或三元组来阻止代码执行。

我将其添加为记录的答案

【参考方案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
    ;