Vuejs - sharing web connections between components

Question

Getting started with a small application vuejs. How to open a connection to a website, say, in the root component and reuse the same connection in other components?

I want the components to be able to send and receive over the same connection. These components will be tied to routes, so there is no direct relationship between parents and children between the root component and the component displayed for the route.

App.vue:

<template>
  <div id="app">
    <h1>My app</h1>
    <router-link to="/">P&L</router-link>
    <router-link to="/other-page">other page</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  name: 'app',
  data () {
    return {
      ws: null
    }
  },

  created () {
    this.ws = new WebSocket('ws://localhost:8123/ws')
  },
  methods: {
    }
  }
}
</script>

Now I would like to reuse wsin other-pageso as not to reconnect every time I change the route.

Answer 1

router-view.

<router-view :socket="ws"></router-view>

{
    props:["socket"],
    data...
}

, , Vuex .

Answer 2

Vue mixin , :

https://github.com/icebob/vue-websocket

, , .

, -, socket.io; , :

https://www.npmjs.com/package/vue-native-websocket