Vue中能否将data属性作为参数传入方法中进行修改？

问题根因 #

JavaScript 中基础类型（数字、字符串等）采用值传递规则，你将this.a_balance这类实例属性作为参数传入函数时，实际只是把属性的当前值复制给了函数内的balance形参，对形参的赋值操作完全不会影响原始的实例属性，所以原写法无法生效。

解决方案 #

方案1：传入属性名动态赋值 #

把要修改的余额对应的属性名作为字符串传入，函数内部直接操作当前实例的对应属性：

async updateTokenBalance(token, balanceKey) {
  const balance = await getTokenBalance(token);
  this[balanceKey] = balance.value.uiAmount;
}

调用时传入属性名字符串即可：

updateTokenBalance(this.a_acc, 'a_balance');
updateTokenBalance(this.b_acc, 'b_balance');
updateTokenBalance(this.c_acc, 'c_balance');
updateTokenBalance(this.d_acc, 'd_balance');

方案2：函数返回余额，调用侧赋值 #

如果不想让通用函数绑定this上下文，可以改成函数直接返回计算好的余额，调用时自行赋值给对应属性：

async getTokenUiAmount(token) {
  const balance = await getTokenBalance(token);
  return balance.value.uiAmount;
}

调用方式：

this.a_balance = await getTokenUiAmount(this.a_acc);
this.b_balance = await getTokenUiAmount(this.b_acc);
this.c_balance = await getTokenUiAmount(this.c_acc);
this.d_balance = await getTokenUiAmount(this.d_acc);

如果需要提升加载速度，可以用Promise.all并行请求4个余额：

const [aBal, bBal, cBal, dBal] = await Promise.all([
  getTokenUiAmount(this.a_acc),
  getTokenUiAmount(this.b_acc),
  getTokenUiAmount(this.c_acc),
  getTokenUiAmount(this.d_acc)
])
this.a_balance = aBal;
this.b_balance = bBal;
this.c_balance = cBal;
this.d_balance = dBal;

内容的提问来源于stack exchange，提问作者ilmoi