对于已经创建的实例,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;
}
}
网友评论