Emit socket event from vuex store

[ivoribeiro]

Hi again, can you give an example how to emit an event from a vuex store action

[seanmthompson]

+1

[rodrigorrch]

+1

[gil0mendes]

+1

[gil0mendes]

Temporarily we can use (new Vue()).$socket.emit(). I know, it's ugly but is better than nothing.

[codeofsumit]

+1
is this really not integrated?

[Autsider666]

+1
Any changes?

[joernroeder]

+1

[joernroeder]

@gil0mendes my mutation breaks as soon as i add the hacky line to send the data down the wire and i'm getting a strange value is not a function error.

I'm using vue 2.3.4, vuex 2.3.1 and vue-socket.io 2.1.1

May i'm doing something wrong or is it broken in the meantime? thanks

[types.MY_UPDATE] (state, { index, value }) {
    state.slots[index].value = value

    (new Vue()).$socket.emit('my_update', { index: value })
},

[gil0mendes]

@joernroeder Hey, the error is really strange. Can you test for me throw the event on an action, instead? Btw, that kind of things is more recommended use on actions.

[Yifei022]

+1

[ghost]

While the (new Vue()).$socket.emit workaround is working, I'm currently using this method:

in store.js:

...snip...
state: {
    io: {}
},
mutations: {
    setSocket: (state, socket) => {
      state.io = socket
    }
}
...snip...

in App.vue (or whatever root component you are using)

...snip...
import store from './store'
export default {
  beforeCreate() {
    store.commit('setSocket', this.$socket)
  },
...snip...

That's how the $socket object gets saved to Vuex so that you can access it via context.state.io.

[joernroeder]

@Dverlik your approroach looks simple and clean – going to use it in the future. thanks for sharing!

[ma53]

Originally posted this in #85 but I thought I'd post it here too in case anyone on the chain might find it useful.

Your mutations and actions can reference the root Vue instance via this._vm. So, this is the method I've been using:

someAction(context, payload) {
    this._vm.$socket.emit('someEvent', someData);
}

Avoids instantiating a new Vue instance every time you need to emit an event.