vue 检测不到 websocket.readyState

Question

this.w =`new WebSocket(`ws://${process.env.VUE_APP_API_HOST}:9501`);`

computed: {aaa(){return this.w.readyState}}
watch:{aaa(){alert('what???')}}

不起作用，研究了一下 可能是 getter setter 不到对象的属性，然后直接 this.readyState = this.w.readyState,也不行。这怎么办啊？但是{{w.readyState}}是能取出来的，这个跟vue 的深入响应式矛盾吗？

Answer 1

你可以监听 WebSocket 对象的事件，然后在事件处理器里主动修改 Vue 组件中的属性，例如：

export default {
  data() {
    return {
      wsReadyState: null
    }
  },
  mounted() {
    this.ws = new WebSocket(`ws://${process.env.VUE_APP_API_HOST}:9501`);
    this.ws.addEventListener('open', () => {
      this.ws.send('Hello Server!');
      this.wsReadyState = this.ws.readyState;
    });
  }
}