Javascript 向接收到的json添加自定义getter

向json中添加自定义getter的最佳方法是什么，在某些视图中经常使用这种方法？例如，考虑表示用户对象的JSON。此json包含诸如

firstName

、

lastName

、“age”等字段。当我希望在Vue组件中使用用户名渲染标签时，我希望这样的标签：

firstName+''+lastName+'（'+age+'）”

我希望在我的SPA应用程序中有这个json中的新字段或getter。我有这样的想法：

• 从axios接收json，并修改此json，如下所示：

  responseData.fullName=responseData.firstName+'+responseData.lastName+'（“+responseData.age+”）”

• 将json映射到类对象，该类对象将映射所有字段，并将getter映射到concat全名，如下所示：user=newuser（responseData）

• 或者其他我没提到的方式

---

我是开发单页应用程序的新手，因此如果您有任何建议，我将不胜感激。

您可以编写这样的函数。它获取具有“firstName”和“lastName”属性的对象的参数并对其进行分解。 下面是关于解构的链接

然后使用模板文本

---

可以将getter添加到用户类中

class User {     
  get fullName() {
    return `${this.firstName} ${this.lastName} (${this.age})`
  }
}

考虑使用计算属性：

export default {
  name: 'SomeComponent',
  computed: {
    userFullName() {
      return this.user ? `${this.user.firstName} ${this.user.lastName} (${this.user.age})` : '';
    }
  },
  data() {
    return {
      user: null
    };
  },
  methods: {
    async loadData() {
      this.user = await axios.get('');
    }
  }
};

---

请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。有解释的答案通常更有帮助，质量也更好，更有可能吸引更多的选票。嗨，谢谢你的努力。我知道如何做到这一点，我只是想问，将json映射到类对象（getter将放置在何处）是否是一种良好的做法，或者是否有另一种使用方法：）@DenisStephanov，对不起。我想我不明白你问的是什么。在将json映射到具有getter的对象时，我没有看到任何不好的地方。但我宁愿使用组件计算属性来实现此目的。@DenisStephanov我在回答中添加了使用计算属性的示例，但我需要在多个组件中使用全名，这样我需要在多个组件上创建计算属性并重复代码。

export default {
  name: 'SomeComponent',
  computed: {
    userFullName() {
      return this.user ? `${this.user.firstName} ${this.user.lastName} (${this.user.age})` : '';
    }
  },
  data() {
    return {
      user: null
    };
  },
  methods: {
    async loadData() {
      this.user = await axios.get('');
    }
  }
};