美文网首页
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;
    }
}

相关文章

  • v-model动态绑定未知属性

    问题描述:使用v-model动态绑定未知属性当前调研结果:不能在根级添加响应式属性当前解决方法: 动态添加响应式属...

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

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, pr...

  • vuex state中数据更新了但是 视图没有更新

    原因是:响应式数据只是一开始data中已经存在的数据才会有响应式数据,Vue 不允许动态添加根级别的响应式属性,可...

  • Vue.set(object, key, value) 方法将响

    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive propert...

  • vue this.$set

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, pr...

  • vue

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, pr...

  • 对象 数组 更新事项

    对象更改检测注意事项对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(o...

  • VUE DAY3 变异方法、计算属性和侦听器

    动态添加的属性不是响应式的 (对于被Object.defineProperty修饰过的属性可以成为响应式属性。)如...

  • Vue3.0 响应式系统原理

    Vue3 响应式 Proxy 对象实现属性监听 多层属性嵌套,在访问属性过程中处理下一级属性 默认监听动态添加的属...

  • 解决 Vue form表单 动态生成 el-checkbox 无

    原理:这是 vue 的深入响应式原理,官方说法和解决方法:Vue 不允许在已经创建的实例上动态添加新的根级响应式属...

网友评论

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

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