How to work correctly in vuex with websocket?

Question

Vue.js

Hello. There are several dozen websocket connections, the data from which needs to be processed and used in different application components. How it is better to implement it? It seems logical through vuex, but it’s not clear how to put them there correctly, and then update them.
Thanks for any ideas.

Answer 1

You create a store in it with the necessary mutation and action. Where you have updated data on sockets, you use dispatch and pass the data as the second argument. You can use some plugin to work with sockets, there are a lot of options. And what is right for your current project, no one will say without understanding it first

Answer 2

Choose a library for sockets, put the connection in the action. When updating data, make a commit to the desired mutations.
Something like this:

export default {
  ...
  actions: {
    connectToChat({commit}, payload){

      socketLib.connect('users', d => {
        commit('updateUsers', d);
      });

    }
  }
   ...
}

As mentioned above, without knowing what kind of sockets, what kind of data, what kind of application architecture, where this data goes. Whether to create a separate store module for each connection, or you can connect everything directly into a column in one fell swoop in one module.