我们目前正在开发一个基于 vue-cli webpack 模板的投票应用程序。由于我们希望以一致且可维护的方式存储和操作我们的投票状态，因此我们打算使用 vuex 进行状态管理。前后端的交互是基于websockets的，我们想用signalr，因为在之前的项目中已经证明它非常好。由于我们是 vue.js 的新手，我们需要一些如何将 signalr、vuex 和 vue.js 完美集成在一起的建议。
让我们描述一下场景:
前端从我们的后端获取一个事件以识别投票事件处于事件状态并且可以接收选定的答案。一段时间后，我们通知前端结果可用并将其显示给用户。在某些情况下，我们可能会进行另一次投票。重要的是我们能够断开连接以防文档被隐藏(页面可见性 API)。
我们的解决方法:
一般来说，我想为此目的实现一个特殊的 signal.service。该服务负责建立连接以及通过 websockets 发送和接收消息。由于我们无法从通用模块对 vuex 存储执行任何更改，因此我们认为 vuex 插件会比较合适。 vuex 插件应该包装 signalr。
如果我们收到 VotingStartEvent，我们将解锁相应的问题并将其显示给用户。如果用户回答了那个问题，我们将这个问题(已回答)的新状态提交给 vuex 存储。在我们的插件中，我们有一个对突变的订阅，我们将使用这个订阅将我们的投票发送到后端。以下片段说明了这个想法:
var plugin = (store) => {
// ...
store.subscribe((mutation, state) => {
console.log('inside subscription');
// if vote has answered state, call connection.send() to submit the message to the backend
});
connection.received((message) => {
// ...
var event = parseEvent(message);
if (event.type === START) {
store.commit({type: 'voting', item: 'unlocked'});
}
// ...
});
}
这种方法好还是您认为有改进的余地？
最佳答案
不需要插件，也不需要像 Vue.prototype.$pusher = new Pusher('apiKey') 这样的结构。我持有 Pusher 实例，就像我需要在组件之间共享的任何其他值一样。我在 Vue 实例方法 create 中初始化 Pusher，就像我需要首先初始化的任何其他库一样。为澄清起见，我特意将交易数据保存在组件实例本身中，因为它们对于每个实例都是唯一的。不是所有你需要的，你必须只存放。
var store = new Vuex.Store({
state: {
pusher: null
},
mutations: {
saveInstance(state, instance) {
state.pusher = instance
}
},
actions: {
initializePusher ({commit}, apiKey) {
commit('saveInstance', new Pusher(apiKey))
}
}
})
Vue.component('live-price', {
template: '#live-price',
props: ['pair'],
data () {
return {
price: 'wait for next trade...',
channel: null
}
},
created () {
this.channel = this.$store.state.pusher.subscribe('live_trades_' + this.pair)
this.channel.bind('trade', data => this.price = data.price)
}
})
new Vue({
el: '#app',
store,
created () {
this.$store.dispatch('initializePusher', 'de504dc5763aeef9ff52')
}
})[v-cloak] { display: none }<div id="app">
<live-price pair="btceur">BITCOIN price in EUR:</live-price>
<live-price pair="ltceur">LITECOIN price in EUR:</live-price>
<live-price pair="etheur">ETHEREUM price in EUR:</live-price>
<live-price pair="xrpeur">RIPPLE price in EUR:</live-price>
</div>
<template id="live-price">
<p>
<slot></slot>
<span v-cloak>{{ price }}</span>
</p>
</template>
<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
关于javascript - 将 SignalR 与 Vue.js 和 Vuex 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47160360/
我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel
我一直很高兴地使用DelayedJob习惯用法:foo.send_later(:bar)这会调用DelayedJob进程中对象foo的方法bar。我一直在使用DaemonSpawn在我的服务器上启动DelayedJob进程。但是...如果foo抛出异常，Hoptoad不会捕获它。这是任何这些包中的错误...还是我需要更改某些配置...或者我是否需要在DS或DJ中插入一些异常处理来调用Hoptoad通知程序？回应下面的第一条评论。classDelayedJobWorker 最佳答案 尝试monkeypatchingDelayed::W
前置步骤我们都操作完了，这篇开始介绍jenkins的集成。话不多说，看操作1、登录进入jenkins后会让你选择安装插件，选择第一个默认的就行。安装完成后设置账号密码，重新登录。2、配置JDK和Git都需要执行路径，所以需要先把执行路径找到，先进入服务器的docker容器，2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击：ManageJenkins>>GlobalToolCon
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每
三分钟集成Tap防沉迷SDK（Unity版）一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下，TapTap推出防沉迷SDK，供游戏开发者进行接入；允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏，防沉谜时间段进入游戏会弹窗进行提示！开发环境要求：Unity2019.4或更高版本iOS10或更高版本Android5.0（APIlevel21）或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用；2.开通服务在使用TDS实名认证和防沉迷服务之前，需要在上面创建的应