Update all clients after a change in vuex state

Question

I am using vue2 syntax and vuex , versions : vue/cli 4.5.13 and vue@2.6.14 and vuex 3.6.2

I have a simple to do project , for adding todos in a list, based on the 2019 vue tutorial by traversy.

I have a simple form ij my component to add a to do <form @submit.prevent="onSubmit" >

and in my vuex store I have

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)
    )
};

Is there a way to update all clients that view the todos, without clients have to refresh nothing, as soon as a new todo is added in the state, using only vuex/vue?

Thank you

Answer 1

Is there a way to update all clients that view the todos, without clients have to refresh nothing, as soon as a new todo is added in the state, using only vuex/vue?

No, it is not possible.

There is no link between all your clients. All your Vue/VueX code lives in a single client. Here's what you need to do to get where you want to go, and its a long way from here:

1. Build a backend server. Here's a Node.js guide
2. Build an APi in your server. Your clients will make requests to this server to get all todos, and post new todos to the server. Here's an express.js guide
3. You need a database to store your todos in the server. You can use something like MongoDB or an ORM like Sequelize for node.js.
4. Now you can either write a code to periodically request the server for todos in the background and update it in your vue components, or you can use a pub/sub library like pusher. Pusher uses WebSockets under the hood for maintaining a persistent bidirectional connection. If you want to, you can implement this on your own, you can read about it here, thanks to @Aurora for the link to the tutorial.

Here's a consolidated guide for doing all this: https://pusher.com/tutorials/realtime-app-vuejs/

Answer 2

Is there a way to update all clients that view the todos, without clients have to refresh nothing, as soon as a new todo is added in the state, using only vuex/vue?

There's a couple of errors in your code:

1. change todos:'' to todos:[]
2. change state.todos.unshift(todo) to state.todos.push(todo)

This way, every time that you call addTodo action, all components connected to allTodos getter will show the latest todos

NOTE:

Vuex/Vue are reactive. So in every page that you see using that showcomponent will show you the last update. If you want to show in every USER CONNECTED, of course you don't need http request, you need WEBSOCKETS