Vue2结合Vuex如何实现状态变更后所有客户端无刷新实时更新

问题答复 #

仅依靠Vue 2.6.14和Vuex 3.6.2本身，无法实现多客户端待办列表的无刷新实时同步，核心原因如下：

• Vuex属于单客户端侧的状态管理工具，所有状态仅存储在当前访问用户的浏览器内存中，不同客户端的Vuex实例完全独立、互不通信，你在某一个客户端修改Vuex状态的操作，默认不会主动通知其他客户端。
• 你当前的实现逻辑仅覆盖了单客户端的更新流程：提交表单→调用Vuex Action发起新增请求→拿到接口响应后修改当前客户端的Vuex状态→更新当前页面视图，完全没有跨客户端同步状态的相关逻辑。

注意：你当前的Vuex配置存在运行错误，state.todos的初始值设置为了空字符串''，字符串没有unshift方法，调用newTodo mutation时会直接报错，需要修改为初始空数组：

const state = {
    todos: [] // 替换原有的空字符串初始值
};

如果要实现多客户端实时同步的需求，需要额外搭配服务端推送能力，常用实现思路如下：

• 低成本方案：所有客户端定时轮询待办列表拉取接口，拿到最新数据后提交mutation更新本地Vuex的todos状态，可实现接近实时的更新效果。
• 低延迟方案：引入WebSocket能力，客户端与服务端建立长连接，服务端收到任意客户端的新增待办请求后，主动向所有已连接的客户端推送最新待办数据，客户端收到推送后提交mutation更新本地Vuex状态即可实现无刷新实时同步。

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