Dom未更新Vuex状态变量：页面加载时coolEventScore无法正常显示

问题根因排查 #

1. axios请求参数错误
   axios.get的标准语法为axios.get(url, 配置项)，你当前代码将空对象作为第二个参数，携带headers的配置放在了无效的第三个参数位，导致请求头未正确携带，大概率触发接口权限错误，请求失败后仅在控制台打印日志，后续更新Vuex的commit逻辑不会执行。
2. 缺失边界值判断，容易触发运行时报错

• 未判断返回值中resp.data.event_info是否存在、是否为数组
• filter筛选后未判断是否存在匹配的coolEvt项，直接取score属性会抛出Cannot read properties of undefined (reading 'score')错误，直接打断后续逻辑执行

3. 渲染逻辑不合理

• 初始状态coolEventScore是空对象，直接用v-html渲染会显示[object Object]，如果该值是普通文本/数字，不需要用v-html，直接插值即可
• 未加加载状态判断，请求完成前会显示异常内容

修复方案 #

1. 修改account.js中getListStats逻辑

getListStats(context) {
    // 修正axios传参，配置项放在第二个参数位
    return Vue.axios.get(
        `xxxx/xxxx`, {
            headers: {
                'XXXX': 'xxxx',
                'XXXX': xxxx
            }
        }).then((resp) => {
            let events = resp.data?.['event_info'] || []
            // 增加匹配结果判断，避免报错
            let coolEvt = events.find(evt => evt.src === "coolEvt")
            if (coolEvt?.score !== undefined) {
                context.commit("setCoolEventScore", coolEvt.score)
            }
            return events;
        }).catch((err) => {
            console.error('获取统计数据失败：', err)
        })
}

2. 修改Cool.vue模板渲染逻辑

<template>
    <div>
        <!-- 普通值用插值语法即可，v-html仅用于渲染HTML片段，增加空状态判断 -->
        <span v-if="coolEventScore">{{ coolEventScore }}</span>
        <span v-else>加载中...</span>
    </div>
</template>

可选优化点 #

如果是Vue2项目，后续如果需要修改coolEventScore的内部属性，建议使用Vue.$set赋值保证响应式生效，当前直接替换整个state值的逻辑不受响应式限制。

内容的提问来源于stack exchange，提问作者Staranco