vue-socket.io-extended: Error while using the library with Vuex in Quasar App

Mutations are called when used with Store

My code looks like this…

[In App.vue]

import VueSocketio from 'vue-socket.io-extended'
import io from 'socket.io-client'
import store from './store'
Vue.use(VueSocketio, io(`http://${window.location.hostname}`), { store });

My mutation is like this in my store’s mutations

SOCKET_message (state, data) {
    console.log(data)
  }

From the server, we are emitting (‘message’, data) Please be noted that I am using Quasar and initializing it in App.vue. Works fine with components but not with Vuex store.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 27 (13 by maintainers)

Most upvoted comments

I’ve just checked quasar project a little bit. And there is not main app entry point. So my suggestion would be to wrap plugin registration and call it during store init.

E.g.:

// socket-plugin.js
import Vue from 'vue';
import io from 'socket.io-client';
import VueSocketIoExt from 'vue-socket.io-extended';

export const socket = io('http://localhost:3000');

export default function (store) {
  Vue.use(VueSocketIoExt, socket, { store });
}

Then

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import SocketPlugin from '../socket-plugin';

Vue.use(Vuex);

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    mutations: {
      SOCKET_CONNECT() {
        console.log('CONNECTED');
      },
    },

    strict: process.env.DEV,
  });

  SocketPlugin(Store); // <--- this line connects plugin in right, quasar-compatible way!

  return Store;
}

I’ve just tried it on my local machine and it works just fine!

Can you check that @KodeStar and/or @sandeeppsmys ?

probil on Aug 2, 2019

I was facing the same issue but using NuxtJs and I found that the parameter store in the plugin file needs the {}:

export default (store) => { change to export default ({ store }) => {

plugins/vue-socket.js

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

export default ({ store }) => {
  const socket = io('http://localhost:4000');

  Vue.use(VueSocketIOExt, socket, { store });
}

Hope it helps

matiasjg on Mar 10, 2020

Thanks probil… its working for me too. Appreciate your efforts and enthusiasm in closing the issue.

sandeeppsmys on Aug 3, 2019

I think it may not like my store, I’m doing the following in router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import socketio from 'socket.io-client'
import VueSocketio from 'vue-socket.io-extended'
import store from '../store'

export const SocketInstance = socketio('http://localhost:3000')

Vue.use(VueRouter)
Vue.use(VueSocketio, SocketInstance, { store })

store/index.js looks like:

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

import app from './app'
import tags from './tags'
import websites from './websites'
import servers from './servers'
import terminals from './terminals'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    state: {
    },
    modules: {
      app, tags, websites, servers, terminals
    }
  })

  return Store
}

My store/terminals/mutations.js looks like:

export function SOCKET_CONSOLEKEY (state, payload) {
  console.log('hit the mutation')
}

I’ve also notice the following pop up in the console:

vue-socket.io-ext.esm.js?f87c:1 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at v (vue-socket.io-ext.esm.js?f87c:1)
    at d (vue-socket.io-ext.esm.js?f87c:1)
    at Socket.eval (vue-socket.io-ext.esm.js?f87c:1)
    at Socket.Emitter.emit (index.js?7297:133)
    at Socket.emit (socket.js?2851:138)
    at Socket.onconnect (socket.js?2851:335)
    at Socket.onpacket (socket.js?2851:232)
    at Manager.eval (index.js?40de:21)
    at Manager.Emitter.emit (index.js?7297:133)

If I remove the store parts and use sockets: {} directly on the component that works

KodeStar on Aug 2, 2019