Vuex和WebSockets的

Question

所以目前我正与VueJS 2个工作，我感到非常新的吧。现在我得到了一些其他人的帮助，但我仍然陷入困境。

这里就是我想实现（例如 - 紧扣我想要的）：

1. 我有一个应用程序的NodeJS上的WebSockets监听。应用程序通过WebSocket监听连接，并将采用JSON数据，然后使用命令，然后使用该命令需要的任何内容的数据对象。

例如该命令可以被登录，并且数据是用户名和密码。上的NodeJS应用程序的登录功能，然后将这些数据做什么需要，然后将其返回在插座，无论是成功还是失败，也许包括ID，并以皮卡和地方一些用户信息Vuex在它的状态，用于应用程序的前端拾取/使用。

目前我使用这种锅炉板：https://github.com/SimulatedGREG/electron-vue

这一直担任我很好的学习曲线，因为我想要使用的Vue和Vuex来管理我的应用程序，然后使用WebSockets进行数据管理并来自数据服务器。

所以，如果你看一下我在app/src目录/渲染/发送的链接（这是主要的代码是VUE和vuex）。

我的一个朋友加入如下代码我作为一个例子，我坚持努力让它进入vuex的行动和突变。他在一个vue组件中完成了所有的工作，所以我正在努力研究它如何与vuex协同工作。因为我希望能够从应用程序中的任何位置访问（示例）loginUser操作（使用多个页面/视图的路由）。

所以在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> 

这是更新后的文件，然后下面是针对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> 

其他一切的代码只是你看到的锅炉板，所以如果有人愿意帮助我，给我一些关于解释这个或其他什么的解读技巧？因为不幸的是我无法找到很多信息。

Answer 1

我有一个电子应用程序，使用Vue和websocket的信息，这里是我如何设置我的。

我定义了一个店，其实也创造和建立WebSocket的。

Store.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 

Renderer.js

import store from "./store" 

new Vue({ 
    data:{ 
     store 
    } 
}) 

这暴露了我的店在我的Vue的根目录下，并让我将数据传递到组件，或者是什么有你。该商店管理来自websocket的所有传入信息。

与你想使用Vuex，你可以做本质上是一回事，其中Vuex将是​​你的店，当消息在插座进来，你只需将它们传递给Vuex。

mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg)) 

并设置您的Vue和组件，以便像通常那样使用Vuex。