调用Object.keys()获取VueX对象键值时随机返回[]的问题

我之前也踩过完全一样的坑！就像你说的——明明用console.log打印这个VueX对象时，能清楚看到它是正常的object类型，还带着有效的属性（比如你给出的示例里2、15、54这些键对应的对象），但一调用Object.keys(obj)就返回空数组[]，当时真的卡了我好一阵。

问题根源 #

这个问题的核心在于Vue的响应式更新时机：当你通过store.dispatch修改VueX中的状态后，Vue并不会立刻完成组件的更新和状态的同步。这时候你直接去读取这个对象，拿到的其实是还没被Vue响应式系统完全处理的“半成品”对象，Object.keys自然识别不到它的属性。

解决方案：使用Vue.nextTick() #

Vue.nextTick()的作用就是等待Vue完成下一次DOM更新循环后再执行回调函数，这时候VueX里的状态已经完全同步，对象也被响应式系统处理好了，再调用Object.keys()就能正常返回属性数组了。

给你举个实际代码示例：

// 在组件中调用修改VueX状态的action后
this.$store.dispatch('updateTargetObj', newData).then(() => {
  // 直接在这里调用Object.keys可能会返回[]
  // 改用Vue.nextTick延迟执行
  Vue.nextTick(() => {
    const targetObj = this.$store.state.yourModule.targetObj;
    console.log(Object.keys(targetObj)); // 现在就能正常输出["2", "15", "54", "56"]啦
  });
});

如果是用Vue 3的Composition API，写法类似：

import { nextTick } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

// 触发action后
store.dispatch('updateTargetObj', newData).then(async () => {
  await nextTick();
  const targetObj = store.state.yourModule.targetObj;
  console.log(Object.keys(targetObj));
});

简单来说，就是利用nextTick把读取对象的操作“延后”到Vue完成更新之后，确保我们拿到的是最新的、完整的响应式对象。

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