vue.js - 页面刷新后如何在Vuex中重新打开websocket连接？

Question

用户注册到我的应用程序后，一个组件向 Vuex 发送一个操作，以开始使用 Websocket 侦听来自服务器的更新请求。

Vuex 动作：

  const socket = io(url);
  socket.on(id, data => {
     ...

我正在使用 Vuex-persisted 来使用 LocalStorage 来存储状态。但是，如果用户刷新浏览器，websocket 连接就会丢失。如果我将套接字包含在 Vuex 状态中，我会收到以下错误：

vuex-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Socket'
    |     property 'io' -> object with constructor 'Manager'
    |     property 'nsps' -> object with constructor 'Object'
    --- property '/' closes the circle

由于 Vuex 没有生命周期钩子，刷新后如何恢复 websocket 连接？

此外，Vuex 应该在刷新后始终从后端刷新状态，以确保在 websocket 连接断开时不会丢失任何更新请求事件。

标签： vue.jsvuex