老师你好,以下是我用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 的主要特点是数据驱动+组件化,对交互和渲染逻辑复杂的应用都比较适合

0
0

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程