CODEWITHSUNDEEP
vue.jsvuexnuxt.js
Elijah Ellanski
Elijah Ellanski

Reputation: 922

Using Vuex with Nuxt and Vue-Native-Websocket

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

Upvotes: 6

Views: 6725

Answers (1)

Aldarund
Aldarund

Reputation: 17621

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 })
}

Upvotes: 11

Related Questions