相关疑难解决方法(0)

所以目前我正在与VueJS 2合作,我对它很新.现在我得到了一些其他人的帮助,但我仍然被困住了.

这是我想要实现的目标(例如 - 与我想要的密切相关):

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

例如,命令可以是登录,数据是用户名和密码.然后,NodeJS应用程序上的登录功能将获取此数据,执行所需操作,然后通过套接字将其返回,无论是否成功,并且可能包含一个ID和一些用户信息,供Vuex拾取并放入其中状态,为应用程序的前端提取/使用.

目前我正在使用这个锅炉板:https://github.com/SimulatedGREG/electron-vue

由于我想使用Vue和Vuex来管理我的应用程序,然后使用WebSockets管理数据服务器之间的数据,因此这对我来说非常有用.

所以,如果你看一下我在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>

这是更新的文件,然后下面是代码 MyApp/app/src/renderer/components/LandingPageView/WebsocketOutput.vue

<template>
  <div>
    <h2>Socket output:</h2>
    <p v-text="socket_out"></p>
  </div>
</template> …