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, Commented Jul 25, 2018 at 16:00
@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
– Elijah Ellanski, Commented Jul 25, 2018 at 16:13
@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
– Elijah Ellanski, Commented Jul 25, 2018 at 16:40
Maybe try building the commit yourself and committing to the store. Does that work? — Ohgodwhy
– Ohgodwhy, Commented Jul 25, 2018 at 16:43
@Ohgodwhy Tried this.store.commit('incrementCounter') inside of passToStoreHandler. Got this.store.commit is not a function — Elijah Ellanski
– Elijah Ellanski, Commented Jul 25, 2018 at 17:15

Aldarund · Accepted Answer · 2018-07-25 22:47:04Z

11

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

answered Jul 25, 2018 at 22:47

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Vuex with Nuxt and Vue-Native-Websocket

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related