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):
- 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.
1 réponses
j'ai une application électronique qui utilise la Vue et un websocket pour des informations et voici comment j'ai configuré la mienne.
j'ai un magasin défini qui crée et installe le websocket.
magasin.js
const socket = require("socket-library") // Take your pick of socket libs
const mySocket = new socket(...)
mySocket.on("message", message => store.handleMessage(message))
...other handlers...
const store = {
handleMessage(message){
// do things with the message
}
}
export default store
moteur de Rendu.js
import store from "./store"
new Vue({
data:{
store
}
})
cela expose mon magasin au niveau de la racine de ma Vue et me permet de passer des données aux composants, ou ce que vous avez. Le magasin gère toutes les informations entrantes de le websocket.
À vous de vouloir utiliser Vuex, vous pourriez faire essentiellement la même chose, où Vuex serait votre magasin et quand les messages arrivent sur le socket, vous venez de passer à Vuex.
mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg))
et mettez en place votre Vue et vos composants pour travailler avec Vuex comme vous le feriez normalement.