vue 中使用websocket,结合vuex实现实时监听

当项目中拥有vuex状态管理，再使用WebSocket 时，会发现监听实时数据十分得心应手。以下聊一聊二者的结合使用；

socket.js

在此文件中建立websocket连接，并暴露出去。

接下图

接上图

创建websocket连接后，在main.js中，将数据用vuex保存起来。

main.js中

引入

switch中根据收到不同的socket ation头去执行不同的保存

如第一个：

通过vuex保存socket数据，又可以在收到实时数据时，进行相应的保存和修改。

在页面中可以通过监听store中保存的值来实时显示与变化。