Vuex&网络套接字 [英] Vuex & Websockets
问题描述
所以目前我正在使用VueJS 2，但我对此很陌生。现在我在其他人身上得到了一些帮助，但我仍然受阻。
So currently I am working with VueJS 2 and I am very new with it. Now I was getting some help with some other people, but I am still stuck.
这是我想要实现的目标（示例-与我想要的目标紧密相关）：
Here is what I want to achieve (example - closely linked to what I want):
- 我有一个侦听WebSockets的NodeJS应用程序。该应用程序通过WebSocket侦听连接，并通过命令获取JSON数据，然后获取包含该命令所需内容的数据对象。
例如，命令可以是登录名，数据可以是用户名和密码。然后，NodeJS应用程序上的登录功能将获取此数据，执行所需的操作，然后通过套接字将其返回（无论是否成功），并可能包括ID和一些用户信息，供Vuex提取并放置在其中。状态，供应用程序的前端提取/使用。
The command for example could be login, and the data be username and password. The login function on the NodeJS application will then take this data, do what it needs and then return it back over the socket, whether it was successful or not, and maybe include an ID and some user information for Vuex to pickup and place in it's state, for the front-end of the application to pick up/use.
当前，我正在使用此样板： https://github.com/SimulatedGREG/electron-vue
Currently I am using this boiler plate: https://github.com/SimulatedGREG/electron-vue
哪个为我服务由于我想使用Vue和Vuex来管理我的应用程序，然后再使用WebSockets来管理数据服务器中的数据，所以这是一个很好的学习曲线。
Which has served me very well as a learning curve, due to me wanting to use Vue and Vuex to manage my application and then use WebSockets for managing data to and from the data server.
所以如果您查看我在app / src / renderer /中发送的链接（这是vue和vuex的主要代码的地方）。
So if you look at the link I sent in app/src/renderer/ (this is where the main code is for vue and vuex).
我的一个朋友添加了下面以我的代码为例，我一直试图将其作为动作和变异引入vuex。他在一个vue组件中完成了所有工作，因此我在vuex的工作方式上苦苦挣扎。正如我希望能够从应用程序中的任何位置访问（示例）loginUser操作（将路由用于多个页面/视图）。
A friend of mine added the following code for me as an example and I am stuck trying to get it into vuex as actions and mutations. He made it all in one vue component, so I am struggling on how it works with vuex. As I want to be able to access the (example) loginUser action from anywhere in the application (uses routes for multiple pages/views).
因此在 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>
这是该文件的更新文件，然后是
That is the updated file for that, and then below is the code for the 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>
其他一切都只是您看到的样板，所以如果有人愿意帮助我并给予帮助我的一些读物提示可以解释这一点或其他问题？
Everything else is just the boiler plate that you see, so if anyone is willing to help me and give me some tips of what to read that explains this or anything else? as I can't find much information on it unfortunately.
推荐答案
我有一个使用Vue和websocket的电子应用程序来获取信息
I have an electron application that uses Vue and a websocket for information and here is how I set mine up.
我定义了一个商店，该商店实际上也创建并设置了websocket。
I have a store defined that also actually creates and sets up the 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的传入信息。
This exposes my store at the root level of my Vue and allows me to pass data to components, or what have you. The store manages all the incoming information from the websocket.
想要使用Vuex，您基本上可以做同样的事情，其中Vuex将成为您的商店，当出现消息时
With you wanting to use Vuex, you could do essentially the same thing, where Vuex would be your store and when messages come in over the socket, you just pass them to Vuex.
mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg))
并设置您的Vue和组件以与Vuex一起使用像通常那样。
and set up your Vue and components to work with Vuex as you typically would.
这篇关于Vuex&网络套接字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
