vue-socket.io与vuex搭配使用

git文档地址：查看文档

版本：3.0.x

vue-socket.io插件提供了很便利的使用websocket的方式

 

简单例子：

服务端提供两个事件"USER_INFO"（前端接收数据）、"SET_USER_INFO"（前端上传数据）

1. 组件内使用：

main.js

import VueSocketIO from "vue-socket.io";
Vue.use(
  new VueSocketIO({
    connection: "http://127.0.0.1:3000"
  })
);

组件内Home.vue

export default {
  data() {
    return {
      info: {
        id: 123,
        name: '张三'
      }
    }
  },
  sockets: {
    //接收数据  'USER_INFO'(data) {} 定义字符串为方法名也是可以的
    USER_INFO(data) {
      this.info = data
    }
  },
  methods: {
    submit() {
      //上传数据
      this.$socket.emit('SET_USER_INFO', this.info);
    }
  }
}

动态注册数据接收可以用 this.so