将自定义 getter 添加到接收到的 json

Posted 2023-02-16

【中文标题】将自定义 getter 添加到接收到的 json

【英文标题】：Add custom getter to received json

【发布时间】：2021-01-18 19:34:58

【问题描述】：

将自定义getter添加到json的最佳方法是什么，这在某些视图中经常使用？例如考虑代表用户对象的json。此 json 具有 firstName、lastName、“年龄”等字段。当我想要在 Vue 组件中使用用户名渲染标签时，我想要这样的标签：firstName + ' ' + lastName + '(' + age + ')'

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

从 axios 接收 json，然后像这样修改这个 json：responseData.fullName = responseData.firstName + ' ' + responseData.lastName + '(' + responseData.age + ')'

将 json 映射到类对象，该对象将映射所有字段，并将 getter 连接到全名，如下所示：user = new User(responseData)

还是我没有提到的其他方式？

我是开发单页应用程序的新手，因此我将不胜感激。

【参考方案1】：

您可以将 getter 添加到您的 User 类中

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

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Functions/get

考虑使用计算属性：

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 我已添加到使用计算属性的答案示例中

但是我需要在多个组件中使用全名，这样我需要在多个组件上创建计算属性并复制代码。

【参考方案2】：

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

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

然后使用模板文字。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

function getFullName( firstName, lastName)  
    return `$firstName $lastName`;


console.log(getFullName(responseData));

// prints for example: Denis Stephanov

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。