Trigger Vuex action with on socket event

[MarlBurroW]

Hello,

Currently, you can trigger vuex mutations with the "SOCKET_" prefix and this is nice !

But sometime, socket events must do more that just change the vuex state. for me it's also very important to be able to trigger Vuex actions by a similar way. Somehting like "event-name" triggering "socketEventName" action.

[MetinSeylan]

added roadmap

[michgeek]

hey @MarlBurroW can you tell more about this ? I'm not sure to understand, maybe I can help

[MarlBurroW]

Hey, i'll try to explain you:

With Vuex, you can:

• dispatch actions (actions commit mutations and/or asynchronous operations)
• commit mutations (mutation allow to modify the vuex state)
  See https://vuex.vuejs.org/en/mutations.html and https://vuex.vuejs.org/en/actions.html

Currently, with Vue-Socket.io, you can trigger Vuex mutations on a socket.io event by prefixing the name of the mutation with "SOCKET_".

BUT (if I'm not wrong) you can't dispatch actions by this same way.
it could be nice to do the same thing for actions, because sometime you need to trigger more than one mutation on a socket event. Sometime you need to make some other operations, asynchrone calls, etc... and actions are made for that.

[michgeek]

What do you think of having the same concept for actions ?

{
  mutations: {
    my_mutation: (state) => { /*...*/ },
    another_mutation: (state) => { /*...*/ },
    SOCKET_USER_MESSAGE: (state) => { /*...*/ }
  ],
  actions: {
    SOCKET_USER_MESSAGE: (context, payload) => {
      // ... do things ...
      context.dispatch('my_mutation', payload);
      context.dispatch('another_mutation', payload);
    }
  }
}

You can decide to declare the socket event either in actions or mutations or both

[MarlBurroW]

Yes, sounds great for me ! I think it's important because it allow to create more complex flow when a socket event is triggered:

EXAMPLE:

actions: {
    SOCKET_USER_MESSAGE: (context, payload) => {
      context.dispatch('new_message_notification', payload);
      context.commit('add_message', payload);
      AudioManager.play('new_message_received');
    }
  }