How to properly connect the vue-native-websocket library and how to properly organize data exchange?

Question

Vue.js

Hello

, I am learning to work with Vue.jsand gradually I understand that with him the chances of shooting myself in the foot are much higher than with React.js
Now my task is to establish client-server communication through web-socket.

Connection question:

I was looking for a library that would integrate with Vue, I myself still do not understand it well enough to integrate something with it.

The most popular one is vue-native-websocket , but they don't have any examples to explain different aspects of the interaction.

According to the documentation that is, I understood how to register the library:

I want interaction with to APIgo through Vuexin the Json.

websocket.js

import Vue from 'vue';
import VueWebsocket from 'vue-native-websocket';
import store from '../store/globalStore';

const server = 'ws:localhost:9998';

const configuration = {
store: store,
format: 'json',
reconnection: true, // (Boolean) whether to reconnect automatically (false)
reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
}

Vue.use(VueWebsocket, server, configuration);

Immediately there is a problem with Vuex, because the documentation describes the connection of a new store instance, in one file with the initialization of the Vue.

My store is divided into modules with their own namespace and is collected in one globalStore.js(It is exported to the constructor Vue).

store structure:

modules

Я вынес файлы модулей из вложенных папок в корневую modules, чтобы временно упростить взаимодействие.

globalStore.js

Вот так я модули собираю:

import Vue from 'vue'
import Vuex, {mapState, mapActions, mapGetters, mapMutations} from 'vuex'

import interfaceHeader from './modules/headerStore';
import interfaceLeftSidebar from './modules/leftSidebarStore';
import interfaceRightSidebar from './modules/rightSidebarStore';
import websocket from './modules/websocketStore';

Vue.use(Vuex);

export default new Vuex.Store({
modules: {
interfaceHeader,
interfaceLeftSidebar,
interfaceRightSidebar,
websocket,
},

});

The first problem is that:

1. It is not enough to pass a module with state, mutations, actions.
   I tried to pass through unpacking a merged object mapGetters/Actions/Mutations/State.
   I even climbed into the store instance and tried to give it away Store._modules.root._children.websocket, but as far as I understand, there is a proxying function and it doesn't like it . Therefore, I disabled the module and passed the entire storage to the store fieldthis.store[n] is not a functionnamespacedwebsoket
   
2. In the repository code from the library, there are actions like:
   

   actions: {
       sendMessage: function(context, message) {
         Vue.prototype.$socket.sendObj({text: 'someone clicked a button'})
       }
     }

   , because the modules apparently do not know anything from the storepro Vue, I have to drag the websocket module intoimport Vue from 'vue';
   
   

Now this mess is working... Connecting to the node server causes a mutation SOCKET_ONOPEN, but dispatch sendMessage a send occurs.
But I'm very afraid that I'll still get problems for this as soon as I delve into the process.

UPD:

• In the morning, Vue.use stopped working in the websocket.js file, I still didn’t understand what happened, moved the library initialization to main.js and it worked again . I didn’t understand why at all .
  
  Now my main.js looks like this:

  
  

  import Vue from 'vue';
  import App from './App.vue';
  import store from './store/globalStore.js';
  import {router} from './routes.js';
  
  import VueWebsocket from 'vue-native-websocket';
  
  const server = 'ws://localhost:9998/';
  
  const configuration = {
    store: store,
    format: 'json',
    reconnection: true, // (Boolean) whether to reconnect automatically (false)
    reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
    reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
  }
  
  Vue.use(VueWebsocket, server, configuration);
  
  
  new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App),
  });

  
  
  
  
  

Question on data exchange:

Do I understand correctly that if I follow the approach Vuex, I now have to call the module every time any of my components needs data, websocketand communicate through it, sending from the server, in addition to the data, another namespace (and probably something else) .

If anyone can throw in good links on such interaction with APIand working with this either, or something on building a suitable architecture, or God forbid, he personally fits in and explains what's what ..
Good beer from me, without jokes and provocations :)