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

Question

我正在使用 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？

谢谢

Answer 1

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

您的代码中有几个错误：

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

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

注意：

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

Answer 2

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

不，这是不可能的。

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

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

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