Vuex & Websockets

donc actuellement je travaille avec VueJS 2 et je suis très nouveau avec elle. J'étais maintenant obtenir de l'aide avec d'autres personnes, mais je suis toujours bloqué.

Voici ce que je veux atteindre (exemple étroitement lié à ce que je veux):

1. j'ai une application NodeJS qui écoute sur les WebSockets. L'application écoute pour les connexions via WebSocket et va prendre des données JSON, avec une commande puis un objet de données avec tout le contenu nécessaire pour cela commande.

la commande par exemple pourrait être login, et les données être username et password. La fonction login sur L'application NodeJS prendra alors ces données, fera ce dont elle a besoin et les retournera ensuite sur la socket, qu'elle ait réussi ou non, et inclura peut-être un ID et quelques informations utilisateur pour Vuex à ramasser et à placer dans son état, pour le devant de l'application à ramasser/utiliser.

actuellement j'utilise cette chaudière: https://github.com/SimulatedGREG/electron-vue

ce qui m'a très bien servi de courbe d'apprentissage, car je voulais utiliser Vue et Vuex pour gérer mon application et ensuite utiliser des WebSockets pour gérer les données à destination et en provenance du serveur de données.

Donc, si vous regardez le lien que j'ai envoyé dans app/src/convertisseur/ (c'est là que le code principal est pour la vue et vuex).

un ami à moi a ajouté le code suivant pour moi comme un exemple et je suis coincé en essayant d'obtenir il en vuex comme actions et mutations. Il a tout fait en un seul composant de vue, donc je me bats sur la façon dont cela fonctionne avec vuex. Comme je veux pouvoir accéder à l'action (example) loginUser de n'importe où dans l'application (utilise des routes pour plusieurs pages/vues).

dans le MyApp/app/src/renderer/components/LandingPageView.vue

<template>
  <div>
    <img src="./LandingPageView/assets/logo.png" alt="electron-vue">
    <h1>Welcome.</h1>
    <current-page></current-page>
    <websocket-output></websocket-output>
    <versions></versions>
    <links></links>
  </div>
</template>

<script>
  import CurrentPage from './LandingPageView/CurrentPage'
  import Links from './LandingPageView/Links'
  import Versions from './LandingPageView/Versions'
  import WebsocketOutput from './LandingPageView/WebsocketOutput'
  export default {
    components: {
      CurrentPage,
      Links,
      Versions,
      WebsocketOutput
    },
    name: 'landing-page'
  }
</script>

<style scoped>
  img {
    margin-top: -25px;
    width: 450px;
  }
</style>

C'est le fichier mis à jour pour ça, et puis ci-dessous est le code pour le MyApp/app/src/renderer/components/LandingPageView/WebsocketOutput.vue

<template>
  <div>
    <h2>Socket output:</h2>
    <p v-text="socket_out"></p>
  </div>
</template>

<script>
  var ws = require("nodejs-websocket")

  export default {
    data () {
      return {
        socket_out: "connecting to the websocket server..."
      }
    },
    mounted () {
      const parent = this
      var connection = ws.connect("ws://dannysmc.com:9999", {}, function (conn) {})
      connection.on("text", function (text) {
        console.log('Text received: ' + text)
        parent.socket_out = text
      })
      connection.on("connect", function () {
        connection.send('yo')
      })
    },
    created () {
      // Set $route values that are not preset during unit testing
      if (process.env.NODE_ENV === 'testing') {
        this.$route = {
          name: 'websocket-output',
          path: '/websocket-output'
        }
      }
    }
  }
</script>

<style scoped>
  code {
    background-color: rgba(46, 56, 76, .5);
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    padding: 3px 6px;
    margin: 0 3px;
    vertical-align: bottom;
  }

  p {
    line-height: 24px;
    color: red;
  }
</style>

tout le reste est juste la plaque chauffante que vous voyez, donc si quelqu'un est prêt à m'aider et me donner quelques conseils de ce que lire qui explique cela, ou autre chose? comme je ne trouve pas beaucoup d'informations sur elle, malheureusement.