Javascript Vue.js组件模型更新

我是Vue框架中的新成员，我需要创建具有实时BTC/LTC/XRP价格的可重用组件

对于实时价格，我使用Bitstamp websockets API。下面是jQuery的使用示例-运行此代码段，它确实是实时的

var-bitstamp=新推送器（'de504dc5763aeef9ff52'）
var channel=bitstamp.subscribe（“实时交易”）
channel.bind（'trade'，函数（lastTrade）{
$（'p'）.text（lastTrade.price）
})

BTC/美元价格
加载…

对于您使用Vue的第一天来说非常好！我只想做一些改变

• 该组件正在使用一个全局的，

  位戳

  。通常，对于组件，您希望它们是独立的，而不是通过自身获取值。为此，将套接字声明为可以传递给组件的属性
• 同样，

  pair

  作为属性传入，但您不声明它，而是使用

  current.$attrs.pair

  获取该对。但这并不是非常声明性的，这使得其他人更难使用该组件。此外，通过将其设置为属性，您可以使用

  this.pair

  引用它
• 当你使用插座之类的东西时，你应该记得在使用完之后要把它清理干净。在下面的代码中，我添加了unsubscribe方法

  beforeDestroy

  是处理这类事情的典型生命周期挂钩
• 计算属性对于计算从组件数据派生的值非常有用：您订阅的通道是计算属性。你真的不需要这样做，但这通常是一个很好的实践
• Vue只能绑定到单个DOM元素。您使用的是一个类

  .prices

  ，它在本例中有效，因为该类只有一个元素，但可能会产生误导
• 最后，created是启动订阅的绝佳场所

console.clear（）
var bitstamp=新推进器（'de504dc5763aeef9ff52'）
Vue.组件（“实时价格”{
道具：[“配对”、“插座”]，
模板：“{price}}”，
数据（）{
返回{
价格：'装载…'，
订阅：空
}          
},
创建（）{
这个。订阅（）
},
在…之前{
这个。取消订阅（）
},
计算：{
频道（）{
if（this.pair==='btcusd'）
返回“实时交易”
其他的
return'live_trades_'+this.pair
}
},
方法：{
onTrade（lastTrade）{
this.price=lastTrade.price
},
订阅（）{
this.subscription=this.socket.subscripte（this.channel）
this.subscription.bind（'trade'，this.onTrade）
},
退订{
this.subscription.unbind（'trade'，this.onTrade）
this.socket.unsubscribe（this.channel）
}
}
})
新Vue({
el:“#价格”，
数据：{
套接字：位戳
}
})

---

重写-现在可以了吗

var配置={
键：“de504dc5763aeef9ff52”
}
var store=新的Vuex.store({
声明：{
推送器：空
},
突变：{
初始推进器（状态、有效载荷）{
state.pusher=新的推进器（payload.key）
}
}
})
var livePrice={
模板：“#实时价格”，
道具：[“配对”]，
数据（）{
返回{
价格：'装载…'，
订阅：空
}          
},
计算：{
频道（）{
返回此值。对==='btcusd'
“现场交易”
：“现场交易”+这对
}
},
方法：{
onTrade（lastTrade）{
this.price=lastTrade.price
},
订阅（）{
this.subscription=this.store.state.pusher.subscripte（this.channel）
this.subscription.bind（'trade'，this.onTrade）
},
取消订阅（）{
this.subscription.unbind（'trade'，this.onTrade）
此.$store.state.pusher.unsubscribe（此.channel）
}
},
创建（）{
这个。订阅（）
},
在销毁之前（）{
这个。取消订阅（）
}
}
新Vue({
el:“#价格”，
商店，
组成部分：{
“实时价格”：实时价格
},
创建（）{
store.commit({
类型：“initPusher”，
key:config.key
})
}
})

{{price}}

重写-这样可以吗？我认为它看起来不错：）一个纯粹主义者可能会抱怨像

de504dc5763aeef9ff52

，

trade

和

live\u trades

这样的硬编码值，但我不是一个纯粹主义者：）我喜欢你把

新推送者（…）

加入到Vue声明中。我在考虑。不幸的是，我也是纯粹主义者：我只寻找真正切实可行的解决方案。。。所以，是否有可能将推送键移动到属性，然后读取它？然后在Vue实例中读取它？这个.el.getAttribute还是什么？完成，重写。这是个好办法吗？或者有更为原生/优雅/高效的解决方案吗？我个人会使用config.js或类似的工具，导入值并根据导入的值进行设置。但这取决于你的设置。嗯，这是有道理的。。。好吧，让我们有一个配置…：）谢谢