Using Vuex with Nuxt and Vue-Native-Websocket

Question

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

Use a callback as the 3rd argument instead, passToStoreHandler: function (eventName, event) {, inside of here log out this.store what is the value — Ohgodwhy
@Ohgodwhy I've tried just now, console is clear, callback doesn't fire { passToStoreHandler: function(eventName, event) { console.log(this.store); console.log('test') }} — Elijah Ellanski
@Ohgodwhy Sorry, I've forgot pass the store to that object. Now console.log returns my store(), but there is no error only if callback is passed to third argument object. No commits are made to store anyway — Elijah Ellanski
Maybe try building the commit yourself and committing to the store. Does that work? — Ohgodwhy
@Ohgodwhy Tried this.store.commit('incrementCounter') inside of passToStoreHandler. Got this.store.commit is not a function — Elijah Ellanski

Aldarund Aldarund · Accepted Answer · 2018-07-25T22:47:04

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

Using Vuex with Nuxt and Vue-Native-Websocket

1 Answers