Always Got Triggered Mutation.

[takielias]

Hi, I have been trying to fixing this issue for 2 days. It always Triggers Mutation but not actions.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const roommsgs = {
  state: {
    roommsgs: []
  },
  mutations: {
    SOCKET_CONNECT(state, status) {},
    SOCKET_ROOMCHAT(state, roomchat) {
      state.roommsgs.push(roomchat);
    }
  },
  actions: {
    socket_roomChat: async ({
      commit,
      dispatch
    }, message) => {
      dispatch('socket_roomChat', message);
      commit('SOCKET_ROOMCHAT', message);
    }
  },
  getters: {
    getChatByRoom: (state) => (room_name) => {
      return state.roommsgs.find(roommsgs => roommsgs.roomname === room_name)
    }
  }
};

const notifications = {
  state: {
    notifications: []
  },
  mutations: {
    SOCKET_NOTIFICATIONS(state, message) {
      state.notifications.push({
        type: 'notifications',
        payload: message
      });
    }
  },
}

export default new Vuex.Store({
  modules: {
    roommsgs,
    notifications,
  }
})

Is there anything else should I consider?

[probil]

Hi, @takielias

Could you please provide me the name of the event you trigger on the server?
Also it would be nice to have:

• Vue.js version
• Socket.io version on client
• Socket.io version on the server
• vue-socket.io-extended version

Thanks for your issue!

[takielias]

"socket.io-client": "^2.1.1",
"vue": "^2.5.17",
"vue-socket.io-extended": "^3.1.0",
"vuex": "^3.0.1"

The event name is roomchat. It always Triggers Mutation First but not actions.

[probil]

the correct name for actions is socket_roomchat.

By default library camelcase the event name and adds it to socket_. Here is an example how you can find the correct action name
https://runkit.com/embed/hdq4k5g9nn68

If you want socket_roomChat action to be triggered you should rename server event to roomChat or RoomChat so camelcased version will be roomChat

[takielias]

This is socket event

sockets: {
roomchat: async function (data) {},
}

And this is the store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const messages = {
  state: {
    messages: [],
    allMessages: [],
    getMsgByRoom: []
  },
  mutations: {

    SOCKET_ROOMCHAT(state, message) {
      console.log('this Mutation is triggered');
      state.messages.push(message);
    },

  },
  actions: {

    socket_roomchat: async (context, payload) => {
      console.log('this action is triggered');
      context.commit("SOCKET_ROOMCHAT", payload);
    }
  },

  getters: {
    getMsgByRoom: state => (room_name) => state.messages.filter(message => message.roomname === room_name),
    allMessages: (state) => {
      return state.messages
    }
  },
};

const notifications = {
  state: {
    notifications: []
  },
  mutations: {
    SOCKET_ROOMCHAT(state, message) {
      state.notifications.push({
        type: 'message',
        payload: message
      });
    }
  },
}

export default new Vuex.Store({
  modules: {
    messages,
    notifications,
  }
})

And this is what I get always.
https://imgur.com/a/1EUKFq0

Mutation was triggered first. Is there anything wrong? I can't figure it.

[probil]

Ok, it seems like I understand the problem now
vue-socket.io-extended uses conventions to call action and mutations automatically. So, when event arrives, the library checks for existing mutation in the store by convention (SOCKET_<EVENT_NAME_IN_UPPER_CASE>) and commits it.
The same for actions but convention is different. (socket_<eventInCamelCase)

So, for your code when server triggers roomchat event:

1. library is looking for SOCKET_ROOMCHAT mutation. If it's there - commits it with payload
2. library is looking for socket_roomchat action. If it's there - dispatches it with payload

But inside socket_roomchat action the SOCKET_ROOMCHAT mutation is committed one more time.

That's why you got

> this Mutation is triggered     -> triggered by vue-socket.io-extended
> this action is triggered       -> triggered by vue-socket.io-extended
> this Mutation is triggered     -> triggered by `socket_roomchat` action (your code)

So it work as it should. You can prevent 2 triggers one of those ways:

1. Remove socket_roomchat action and handle socket event by SOCKET_ROOMCHAT mutation only. Its triggered by library
2. Change name of the mutation. Simply remove SOCKET_ prefix or/and use more meaningful name. For example ADD_MESSAGE looks better for me

[takielias]

WOW !!! It's Done !! Thanks.