Node.js Vuex&；网袋

因此，目前我正在使用VueJS 2，我对它非常陌生。现在我得到了一些其他人的帮助，但我仍然被卡住了

以下是我想要实现的目标（示例-与我想要的目标密切相关）：

我有一个监听WebSocket的NodeJS应用程序。应用程序通过WebSocket侦听连接，并将获取JSON数据，然后获取包含该命令所需内容的数据对象

例如，命令可以是login，数据可以是username和password。然后，NodeJS应用程序上的登录函数将获取这些数据，执行它需要的操作，然后通过套接字将其返回，无论成功与否，还可能包括一个ID和一些用户信息，以便Vuex拾取并置于其状态，以便应用程序前端拾取/使用

目前我正在使用这个锅炉板：

由于我希望使用Vue和Vuex来管理我的应用程序，然后使用WebSocket来管理与数据服务器之间的数据，因此这对我来说是一个非常好的学习曲线

因此，如果您查看我在app/src/renderer/中发送的链接（这是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>

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

---

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

我有一个电子应用程序，它使用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

import store from "./store"

new Vue({
    data:{
        store
    }
})

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

import store from "./store"

new Vue({
    data:{
        store
    }
})

这将在Vue的根级别公开我的存储，并允许我将数据传递给组件或您拥有的其他组件。商店管理来自websocket的所有传入信息

如果您想使用Vuex，您可以做基本相同的事情，Vuex将是您的存储，当消息通过套接字传入时，您只需将它们传递给Vuex

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

---

并将Vue和组件设置为与Vuex一起使用，就像您通常所做的那样。

为什么不在任何单个文件组件之外设置套接字，并在收到数据时向Vuex发送操作。如果组件设置正确，它们应该呈现新状态。那么我会设置套接字，比如加载，然后当套接字发生事件时，需要存储并执行

store.dispatch（）

？我不使用Vuex，但我有一个使用websocket的电子应用程序，是的，基本上，在渲染器脚本中我创建了websocket，需要存储，并在我的websocket中设置事件，以便它们直接调用存储。Vue只会在存储更改时呈现更改。@BertEvans噢，我不知道这么简单！非常感谢。我会试一试的。谢谢你！我用它来构建自己的，这比我想象的要简单得多。vuex文档中还有一个websocket插件示例：这似乎比官方的vuex插件示例更容易理解。使用插件将如何改善情况？websocket API是否已更改？新方法似乎是

.onopen

和

onmessage

：此外，在Vuex中（在@Jörn的示例中也是如此），最好使用突变而不是操作，在正常情况下，您希望在不进一步对websocket数据进行异步操作的情况下突变状态。