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

Question

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

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

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

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

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

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

标签： javascriptjsonvue.jsvuejs2single-page-application

Answer 1

您可以将吸气剂添加到您的用户类

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('');
    }
  }
};