Vue.js – Using Vuex with Nuxt and Vue-Native-Websocket

nuxt.jsvue.jsvuex

I'm trying to fill my vuex store with data from websocket. I'm using Nuxt. For handling websocket I'm using vue-native-websocket package. Connection to websocket is successful, but commiting to the store doesn't work, it fires an error on every socket event Uncaught TypeError: this.store[n] is not a function

According to Nuxt and vue-native-websocket docs, I've using them as following:

Plugin native-websocket.js:

import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'
import store from '~/store'

Vue.use(VueNativeSock, 'wss://dev.example.com/websocket/ws/connect', { store: store })

nuxt.config.js

  plugins: [
   {src: '~plugins/native-websocket.js', ssr: false}
],

As the connection is established, I draw a conclusion that the package is connected right, so it's something about store and I can't get what's wrong

UPD: After some workaround I've found out that logging store inside native-websocket.js returns 

store() {
  return new __WEBPACK_IMPORTED_MODULE_1_vuex__["default"].Store({
   state: {...my store

and commiting to it returns __WEBPACK_IMPORTED_MODULE_2__store__.default.commit is not a function
So it's something about webpack as I can see

Best Answer

You need to import store differently e.g. get it from context of plugin. Here some docs, but they somewhat lacking

import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'

export default ({ store }, inject) => {
  Vue.use(VueNativeSock, 'wss://dev.example.com/websocket/ws/connect', { store: store })
}
Related Topic