Cannot read property 'emit' of undefined

[gijo-varghese]

I've a .vue file like this:

<template>
  <div class="home">
    <h1>Hello</h1>
  </div>
</template>
<script>
export default {
  sockets: {
    connect: () => {
      this.$socket.emit("join_room", "abc");
    },
  }
};
</script>

and I'm getting an error: Uncaught TypeError: Cannot read property 'emit' of undefined

main.js

import VueSocketio from 'vue-socket.io-extended';
import io from 'socket.io-client';
import Vue from 'vue';

import App from './App.vue';

Vue.use(VueSocketio, io('http://localhost:4000'));

new Vue({
  render: h => h(App),
}).$mount('#app');

[gijo-varghese]

It works if I put it inside main.js like:

new Vue({
  sockets: {
    connect: () => {
      this.$socket.emit("join_room", "abc");
    },
  },
  render: h => h(App),
}).$mount('#app');

[probil]

Hi, @gijo-varghese Thanks for your question.

Could you try to use function instead of arrow function?
I mean:

sockets: {
  connect() {
    this.$socket.emit("join_room", "abc");
  },
},

[gijo-varghese]

Cool. That worked, thanks!

It would be great if you can mention that in the docs

[probil]

Yeah, great idea 👍 . Added to backlog
Thanks, @gijo-varghese

[gijo-varghese]

@probil similarly, how can I emit from a store action?

SOCKET_CONNECT: (state) => {
      state.connected = true;
      this.$socket.emit('join_room', 'abc');  // Cannot read property 'emit' of undefined
},

[probil]

It seems like you mean mutation, because only mutation accepts state as a first argument.

SOCKET_CONNECT(state) {
      state.connected = true;
      this._vm.$socket.emit('join_room', 'abc');  // <-- `_vm` is required here
},

I know this is not the perfect solution but it should work.

Btw, try to move this to action instead. Because mutations are like sync transaction and should only change the state

---

As I know there is now way to extend action context so probably I will implement it using custom namespaced module in store. So socket emit will look like this

dispatch('socket/emit', { msg: 'Hi there' });

[gijo-varghese]

oh ok. For now, I going with vue-stash instead of vuex. Vuex seems to be pretty big for my simple project

[probil]

Vuex is not really big, it's around ~10kb (~3kb gzip) but ok. Let me know if you have any questions