美文网首页
uni-app动态添加根级别的响应式属性

uni-app动态添加根级别的响应式属性

作者: 移动端_小刚哥 | 来源:发表于2019-08-07 17:05 被阅读0次

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如,对于:

    Vue.set(vm.someObject, 'b', 2)
    

    您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

    this.$set(this.someObject,'b',2)
    

    有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign()_.extend()。但是,这样添加到对象上的新属性不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

    // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
    

    以上是官网的描述,我只是摘抄过来,下面是我的小事例:
    我要封装一个请求头,在多个页面进行网络请求时直接获取而不需要关心header里面都有什么东西。

    一、使用Vue.set(object, propertyName, value)方法

    ⚠️需要引入vue

    import Vue from 'vue'
    export const netRequest = {
        
        //登录成功时将获取的token通过这个key存储起来,以后取值也是使用这个key
        tokenKey: 'tokenKey', 
        
        //不同接口编码格式不同,根据不同接口设置编码格式 
        contentType: {
            'json':'application/json;charset=UTF-8',
            'urlencoded':'application/x-www-form-urlencoded'
        },
        
        getHeaders: function(type){
            //如果不设置Content-Type那么默认为application/json;charset=UTF-8
            var cType = 'application/json;charset=UTF-8';
            if(type){//以设置的Content-Type为准
                cType = type;
            }
            
            let _headers = {
                "os": "ios", 
                "version": "2.9.1", 
                "appname": "crm",
                "Content-Type": cType
            };
            
            //如果当前已经登录,那么在请求头设置token,否则不设置token
            const token = uni.getStorageSync(netRequest.tokenKey);
            if(token){
                Vue.set(_headers,'token',token)
            }else{
                console.log('token为空');
            }
            return _headers;
        }
    }
    
    二、使用Object.assign()方法
    export const netRequest = {
        
        //登录成功时将获取的token通过这个key存储起来,以后取值也是使用这个key
        tokenKey: 'tokenKey', 
        
        //不同接口编码格式不同,根据不同接口设置编码格式 
        contentType: {
            'json':'application/json;charset=UTF-8',
            'urlencoded':'application/x-www-form-urlencoded'
        },
        
        getHeaders: function(type){
            //如果不设置Content-Type那么默认为application/json;charset=UTF-8
            var cType = 'application/json;charset=UTF-8';
            if(type){//以设置的Content-Type为准
                cType = type;
            }
            
            let _headers = {
                "os": "ios", 
                "version": "2.9.1", 
                "appname": "crm",
                "Content-Type": cType
            };
            
            //如果当前已经登录,那么在请求头设置token,否则不设置token
            const token = uni.getStorageSync(netRequest.tokenKey);
            if(token){
                _headers = Object.assign({},_headers,{'token':token})
            }else{
                console.log('token为空');
            }
            return _headers;
        }
    }
    

    相关文章

      网友评论

          本文标题:uni-app动态添加根级别的响应式属性

          本文链接:https://www.haomeiwen.com/subject/zbkadctx.html