Vuex＆Websockets

Question

現在、私はVueJS 2で作業しており、とても新しいです。今私はいくつかの他の人々といくつかの助けを得ていましたが、私はまだ立ち往生しています。

1. が、私はWebSocketを上リッスンNodeJSアプリケーションを持っている： - （密接に私が欲しいものにリンクされている例）ここで

   は私が達成したいものです。アプリケーションはWebSocketを介して接続をリッスンし、JSONデータをコマンドとともに取得し、そのコマンドに必要なコンテンツを持つデータオブジェクトを取得します。

たとえば、コマンドはログインになり、データはユーザー名とパスワードになります。 NodeJSアプリケーションのログイン機能は、このデータを受け取り、必要な処理を行い、成功したかどうかにかかわらず、ソケットを介して戻します。そして、VuexがIDといくつかのユーザー情報を含んでいます。アプリケーションのフロントエンドがピックアップ/使用するための状態です。

現在、私は、このボイラープレートを使用しています：原因私には、私は非常にだけでなく、学習曲線を務めているhttps://github.com/SimulatedGREG/electron-vue

は私のアプリケーションを管理し、その後にデータを管理するためのWebSocketを使用するVUEとVuexを使用したいとデータサーバーから取得します。

私がapp/src/renderer /に送ったリンクを見れば、メインコードはvueとvuexです。

私の友人が私のために次のコードを例として追加しましたが、私はそれを行動や突然変異としてvuexに取り込もうとしています。彼は1つのvueコンポーネントですべてを作ったので、私はvuexでどのように動作するかについて苦労しています。アプリケーションのどこからでも（example）loginUserアクションにアクセスできるようにしたいのです（複数のページ/ビューのルートを使用します）。

そのための更新されたファイルで、その後、下記の他 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> 

すべてはあなたが見るだけで、ボイラープレートであるため、コードで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> 

でそう

誰かが私を助けてくれると私に何を読んで何かのヒントを教えてくれればそれは何か他のことを説明してくれますか？残念ながらそれに関する多くの情報を見つけることはできません。

Answer 1

私はVueとwebsocketを情報として使用する電子アプリケーションを持っています。ここに私がどのように設定しているのですか？

実際にwebsocketを作成して設定するストアを定義しました。これは私のVueのルートレベルに私の店を公開して、私は、コンポーネント、または何にデータを渡すことができます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 
    } 
}) 

あなたはいますか？店舗はwebsocketからのすべての着信情報を管理します。

Vuexを使いたければ、Vuexがあなたの店になり、メッセージがソケットの上に来るときにVuexに渡すだけで同じことができます。

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

通常は、VuexとVuexで動作するようにVueとコンポーネントを設定します。