vuex 状态改变后更新所有客户端

Posted 2023-02-22

【中文标题】vuex 状态改变后更新所有客户端

【英文标题】：Update all clients after a change in vuex state

【发布时间】：2021-10-26 16:31:19

【问题描述】：

我正在使用 vue2 语法和 vuex，版本：vue/cli 4.5.13 和 vue@2.6.14 和 vuex 3.6.2

我有一个简单的to do 项目，用于在列表中添加待办事项，基于 traversy 的 2019 vue 教程。

我有一个简单的表单 ij 我的组件要添加一个待办事项 <form @submit.prevent="onSubmit" >

在我的 vuex 商店里我有

const state = 
    todos:''

;

const getters = 
    allTodos: (state) => return state.todos
;

const actions =  
    async addTodo(commit, title)
        const res = await axios.post('https://jsonplaceholder.typicode.com/todos', 
            title, 
            completed:false
        ); 
        commit('newTodo', res.data);
        
;

const mutations =  
    newTodo:(state, todo)=>( 
        state.todos.unshift(todo)
    )
;

有没有办法更新所有查看 todos 的客户端，而无需客户端刷新任何内容，只要在 state 中添加新的 todo，只使用 vuex/vue？

谢谢

【参考方案1】：

有没有办法更新所有查看 todos 的客户端，而无需客户端刷新任何内容，只要在 state 中添加新的 todo，只使用 vuex/vue？

您的代码中有几个错误：

将 todos:'' 更改为 todos:[] 将 state.todos.unshift(todo) 更改为 state.todos.push(todo)

这样，每次调用 addTodo action，所有连接到 allTodos getter 的组件都会显示最新的 todos

注意：

Vuex/Vue 是反应式的。因此，在您使用该 showcomponent 看到的每个页面中，都会向您显示最后一次更新。如果你想在每个 USER CONNECTED 中显示，当然不需要 http 请求，你需要 WEBSOCKETS

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

我是在回答问题，不是在批评

你是对的，我的错。如果建议的解决方案没有被描述为代码中的错误，那就更清楚了。

在问题update all clients that view the todos, without clients have to refresh nothing 的上下文中，您的回答every page that you see using that showcomponent will show you the last update 有点误导。即使一台机器上只有一个用户，VueX 状态仍将被限制在一个浏览器选项卡中（即使 OP 使用 href 链接也不会如此）。我的意思是它与every USER CONNECTED 无关，它与 VueX 状态持久性有关，您可以使用一些 setup

如果要持久化状态数据，请使用 vuex-persistedstate @Mythos

【参考方案2】：

有没有办法更新所有查看 todos 的客户端，而无需客户端刷新任何内容，只要在 state 中添加新的 todo，只使用 vuex/vue？

不，这是不可能的。

您的所有客户之间没有链接。您所有的 Vue/VueX 代码都存在于一个客户端中。以下是您需要做的事情才能到达您想去的地方，而且距离这里还有很长的路要走：

构建后端服务器。 Here's a Node.js guide 在您的服务器中构建一个 API。您的客户端将向此服务器发出请求以获取所有待办事项，并将新的待办事项发布到服务器。 Here's an express.js guide 您需要一个数据库来将您的待办事项存储在服务器中。您可以为 node.js 使用 MongoDB 或 Sequelize 等 ORM。 现在您可以编写代码在后台定期向服务器请求待办事项并在您的 vue 组件中更新它，或者您可以使用像 pusher 这样的发布/订阅库。 Pusher 在底层使用 WebSockets 来维护持久的双向连接。如果你愿意，你可以自己实现它，你可以阅读它here，感谢@Aurora提供教程的链接。

以下是执行所有这些操作的综合指南： https://pusher.com/tutorials/realtime-app-vuejs/

【讨论】：

神话是对的。您也可以查看 websocket：developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/…

@Aurora 感谢您的链接。有趣的是，Pusher 在底层使用 WebSockets。我会将您的链接添加到答案中。