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。