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

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

__WEBPACK_IMPORTED_MODULE_2__store__.default.commit is not a function

passToStoreHandler: function (eventName, event) {

this.store

{ passToStoreHandler: function(eventName, event) { console.log(this.store); console.log('test') }}

store()

this.store.commit('incrementCounter')

passToStoreHandler

this.store.commit is not a function

1 Answer
1

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.