Vue.js中lodash.get始终返回Null的问题排查

1. 异步数据加载时机问题：PUSH API的数据是异步推送的，组件初始化时store.state.socket下的configList和statusList尚未被赋值，此时你的computed会返回null。后续数据推送完成后值会更新，但初始阶段的null已经触发了遍历、属性访问等操作的报错。
2. 未处理空值的边界情况：你直接对可能为null的computed值执行forEach、属性读取等操作，没有做前置判空，导致Vue渲染或computed计算时抛出"Cannot read properties of null"错误。

1. 给computed设置安全的默认值 #

将lodash.get的默认值从null改为对应类型的空结构，确保无论数据是否就绪，computed返回的都是可安全操作的类型：

const configList = computed(() =>
  lodash.get(store.state.socket, 'configList', []) // 默认空数组替代null
)
const statusList = computed(() =>
  lodash.get(store.state.socket, 'statusList', {}) // 默认空对象替代null
)

这样即使数据未加载，configList始终是数组（空或有数据），statusList始终是对象，遍历、属性访问操作不会因为null报错。

2. 在依赖computed中增加判空逻辑 #

如果需要保留null的初始状态，在test computed中先判断数据是否就绪，再执行合并逻辑：

const test = computed(() => {
  // 数据未就绪时返回表格需要的空结构
  if (!configList.value || !statusList.value) {
    return []
  }

  // 这里编写合并configList和statusList的逻辑
  return configList.value.map(item => ({
    ...item,
    // 示例：根据config项的id匹配status值
    online: statusList.value[item.deviceId] ?? false
  }))
})

3. 模板层增加条件渲染 #

在Vue模板中，只有当数据就绪后再渲染DataTable，避免初始空值触发渲染错误：

<template>
  <DataTable 
    v-if="configList.length && Object.keys(statusList).length" 
    :data="test" 
  />
  <div v-else>数据加载中...</div>
</template>

4. 使用可选链操作符做防御性访问 #

如果无法避免null的情况，在访问属性或执行遍历操作时用可选链?.避免报错：

// 遍历configList时的防御写法
configList.value?.forEach(item => {
  // 你的操作逻辑
})

// 访问statusList属性时的防御写法
const targetStatus = statusList.value?.targetKey ?? false

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