老师你好,以下是我用Vue提取云信SDK的数据,您看看是否不适合用vue做数据交互啊?
来源:16-7 外部组件(5)

慕斯7859430
2017-04-09
从云信SDK读取了数据以用户名userUID="alayiiii"为例,personlist={ "alayiiii": { "account": "alayiiii", "nick": "123123", "gender": "unknown", "createTime": 1488342704734, "updateTime": 1488342704734 } },用Vue的过程中有几个问题:1.div如果不绑myCache,则mPersonlist只显示为{};2.cache只赋给myCache数据不能赋给它的方法,例如(getPersonlist())3.mUser始终为false;4.云信SDK没有npm install功能,是否不能用cue-cli做单页面;5.基于云信SDK的数据是否根本不适合用vue去交互呀?
云信SDK资料地址:http://dev.netease.im/docs?doc=web
<div id="all">
<div style="display: none;">{{myCache}}</div>
<div >{{mPersonlist}}</div>
<div >{{mUser}}</div></div>
<script src="3rd/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="3rd/NIM_Web_SDK_v3.5.0/js/NIM_Web_NIM_v3.5.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//读取用户名,用户名为唯一id
var userUID = readCookie('uid'),that = this;
//封装 SDK连接与功能相关,
var SDKBridge = function (ctr,data) {
//缓存需要获取的用户信息账号
this.person = {};this.person[userUID] = true;this.controller = ctr;this.cache = data;
//初始化云信SDK
window.nim = ctr.nim = this.nim = NIM.getInstance({
appKey: CONFIG.appkey,account: userUID,token: sdktoken,
/*连接*/ onconnect: onConnect.bind(this),
/*个人信息*/ onmyinfo:onMyInfo.bind(this)});};
function onMyInfo(data){this.cache.updatePersonlist(data);};
//封装 数据缓存
var Cache = function (argument) {this.personlist = {};}
/* 根据account获取用户对象 @param account: 用户account */
Cache.prototype.getUserById = function (account) {
if(this.personlist[account]){return this.personlist[account];}
return false;};
// 用户对象相关
Cache.prototype.setPersonlist = function(list){
var item;
for (var i = list.length - 1; i >= 0; i--) {
item = list[i];this.personlist[item.account] = item;};};
Cache.prototype.getPersonlist = function(){return this.personlist;};
//以上是云信Demo的部分代码
//用Vue呈现数据
var cache = new Cache();
var mysdk = new SDKBridge(this, this.cache);
var vm = new Vue({
el: "#all",
data: {
myCache: that.cache,
mPersonlist:that.cache.getPersonlist(),
mUser: that.cache.getUserById(userUID)},
mounted: function() {
this.$nextTick(function() {
console.log(this.myCache);
console.log(this.mUser);
console.log(this.mPersonlist)})}
</script>
1回答
-
ustbhuangyi
2017-04-11
vue 的主要特点是数据驱动+组件化,对交互和渲染逻辑复杂的应用都比较适合
00
相似问题