首先，你的代码主要存在两个核心问题，导致this.username为undefined，同时部分逻辑不符合预期：

1. 回调函数中的this指向错误 #

在chrome.runtime.onMessage.addListener的回调里，你使用了普通的function声明，这会导致函数内部的this不再指向Vue组件实例，而是指向回调函数自身的执行上下文。所以你赋值this.username = request.name时，实际上是给这个回调函数的私有变量赋值，而不是Vue实例的username属性，外部自然无法获取到。

2. Chrome Identity API的响应是JSON字符串而非对象 #

你提到无法通过key.val的方式访问响应对象，这说明API返回的并不是一个JavaScript对象，而是JSON格式的字符串。直接尝试访问request.name自然会得到undefined，需要先将其转换为JS对象才能正常读取属性。

最佳实现方式 #

我们可以通过以下两步修正代码：

第一步：修正this指向问题 #

有两种常见方案：

• 使用箭头函数作为回调：箭头函数不会绑定自己的this，会继承外层作用域的this（也就是Vue组件实例）。
• 在回调外部保存this的引用（比如const vm = this），然后在回调里用vm代替this。

第二步：解析JSON响应字符串 #

在处理API响应时，先用JSON.parse()将字符串转换为JS对象，再读取属性。

修正后的完整代码示例 #

<script>
import { EventBus } from '../../event-bus';
export default {
  data () {
    return {
      socket: null,
      isRegistered: false,
      isConnected: false,
      username: null,
      message: '',
    }
  },
  created() {
  },
  mounted() {
    // 使用箭头函数修正this指向
    chrome.runtime.onMessage.addListener((request, sender) => {
      console.log('原始API响应:', request);
      // 将JSON字符串转换为JS对象
      const userInfo = JSON.parse(request);
      console.log('解析后的用户信息:', userInfo);
      // 现在可以正常访问属性了
      this.username = userInfo.name;
      this.isRegistered = true;
      // 拿到用户名后再发送连接事件，确保连接时已有用户名
      EventBus.$emit('open-connection');
      // 此时打印会有值
      console.log(this.username);
    });

    EventBus.$on('connected', (socket) => {
      console.log(socket)
      this.socket = socket;
      this.isConnected = true;
      console.log(this.socket.id)
    });
  },
  methods: {
    // 这里可以保留你需要的方法逻辑
  }
}
</script>
<style scoped>
</style>

额外说明 #

你之前提到EventBus.$emit('open-connection')好像没生效，这是因为原来的代码是在挂载时直接发送事件，但此时chrome.runtime.onMessage的回调还没触发（API响应是异步的），发送连接事件时可能还没拿到用户名。修正后我们把EventBus.$emit('open-connection')放到回调内部，确保只有在获取到用户名、标记isRegistered为true后才发起连接，这样逻辑更合理。

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