所以目前我正在使用 VueJS 2,我对它非常陌生。现在我得到了一些其他人的帮助,但我仍然卡住了。
这是我想要实现的(示例 - 与我想要的密切相关):
- 我有一个监听 WebSockets 的 NodeJS 应用程序。应用程序通过 WebSocket 监听连接,并将获取 JSON 数据、命令和包含该命令所需的任何内容的数据对象。
例如命令可以是登录,数据是用户名和密码。 NodeJS 应用程序上的登录函数将获取这些数据,执行它需要的操作,然后通过套接字将其返回,无论它是否成功,并且可能包含一个 ID 和一些用户信息,以便 Vuex 获取并放置在其中状态,供应用程序的前端拾取/使用。
目前我正在使用这个样板:https://github.com/SimulatedGREG/electron-vue
由于我想使用 Vue 和 Vuex 来管理我的应用程序,然后使用 WebSockets 来管理进出数据服务器的数据,这对我来说非常有用。
因此,如果您查看我在 app/src/renderer/中发送的链接(这是 vue 和 vuex 的主要代码)。
我的一个 friend 为我添加了以下代码作为示例,我一直试图将其作为操作和突变导入 vuex。他在一个 vue 组件中完成了这一切,所以我正在努力研究它如何与 vuex 一起工作。因为我希望能够从应用程序中的任何位置访问(示例)loginUser 操作(使用多个页面/ View 的路由)。
所以在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>
其他所有内容都只是您看到的样板,所以如果有人愿意帮助我并给我一些阅读内容的提示,可以解释这一点或其他任何内容?因为很遗憾,我找不到太多关于它的信息。
最佳答案
我有一个使用 Vue 和 websocket 获取信息的 Electron 应用程序,这是我的设置方式。
我定义了一个商店,它实际上也创建和设置了 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。
关于node.js - Vuex 和 Websocket,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44333164/