mounted钩子中调用Vuex dispatch返回Observer对象无预期数据问题

问题根因 #

• 首先你对$store.dispatch的返回值处理错误：Vuex的dispatch方法调用action后，永远返回Promise对象，你当前直接用!!对Promise做布尔转换，不管异步执行结果如何，Promise本身转布尔值永远为true，逻辑完全不生效。
• 其次你打印state.share_tokens得到Observer对象是Vue的正常表现：这是Vue给响应式对象添加的代理封装，不代表数据丢失，直接访问对象属性即可正常读取值；如果访问对应token属性返回undefined，说明你给share_tokens赋值的逻辑是异步执行的，mounted触发时赋值操作还未完成。
• 最后你的checkShareToken逻辑仅做state读取，没有异步操作，放在action里属于不必要的设计，额外增加了异步处理成本。

修复方案 #

方案1：保留现有action逻辑，补充异步处理 #

修改组件代码，用async/await接收dispatch返回的异步结果：

async mounted() {
    this.newShareToken = this.$route.query.token;
    console.log('mounted this.checkLocalStorageToken()');
    // 等待异步校验结果返回
    const isTokenValid = await this.checkLocalStorageToken(this.newShareToken)
    if( !isTokenValid ) {
       // 原有校验失败逻辑
    }
}

// 方法改为异步，等待dispatch结果
async checkLocalStorageToken(token) {
   const checkResult = await this.$store.dispatch('campaign-new-share/checkShareToken', token);
   return !!checkResult;
},

如果确认share_tokens是异步初始化的，需要额外等待初始化完成后再执行校验：可以在state中新增shareTokensLoaded标识，初始化完成后设为true，在组件中watch该标识变为true后再执行校验逻辑。

方案2：改用getter实现（更适配当前场景） #

因为你的逻辑仅涉及state读取，没有异步操作，直接用Vuex getter更简洁，不需要处理异步：

1. 给对应Vuex模块添加getter：

// campaign-new-share 模块下新增getters
getters: {
  checkShareToken: (state) => (token) => {
    // 可选链式调用兼容undefined情况
    return state.share_tokens?.[token] ?? null
  }
}

2. 组件直接调用getter，不需要异步处理：

checkLocalStorageToken(token) {
   return !!this.$store.getters['campaign-new-share/checkShareToken'](token);
},

补充说明 #

如果你需要打印响应式对象的完整原始值排查问题，可以用console.log(JSON.parse(JSON.stringify(state.share_tokens)))即可脱掉响应式代理外壳，看到实际存储的数据。

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