Реактивные атрибуты класса?

Question

[Artem0071]

Есть некий компонент в котором я получаю данные с апи и вывожу их
Код что то в этом роде из себя представляет:

<template>
  <div v-if="user">
     <input v-model="user.name" />
  </div>
</template>

<script>
export default {
  data: () => ({
    user: null
  }),
  methods: {
    loadUser () {
        this.$api.users.show(userId) {
           //from response get user instance...
          this.user = response
        }
    }
  }
}
</script>

Так вот, что то задумался и захотелось создать отдельный класс с моделью пользователя, и при этом реагировать на изменения атрибутов
Пришел к такой структуре:

export default class User {
    constructor (payload) {
        this._original = payload
        this._attributes = User.refactorPayload(payload)
        this._changed = {}
    }

И данные хотел отображать в компоненте как:
user.getAttribute('name')

Это все сделал, но столкнулся с проблемой two-way-binding

У меня все атрибуты содержаться в _attributes

В общем я не знаю как сделать геттер-сеттеры в js...
С геттерами получилось через обертку getAttribute:

getAttribute(key){
        if (this._attributes.hasOwnProperty(key)) {
            return this._attributes[key]
        }

        return null
}

Но если я в v-model вставлю user.getAttribute('name'), то соответственно ничего не изменится
В общем я не знаю как это правильно нужно организовать...
Помогите пожалуйста
Не хочется делать через user._attributes.name, а хочется как то более "правильнее" что ли..

Comments

[alex]

господи че за дичь

Answer 1

[Андрей Седышев]

Вариант "в лоб" - не использовать "сахарок" в виде v-model, а использовать

<input :value="user.getAttribute('name')" @input="e => user.setAttribute('name', e.target.value)"/>

А вообще, зачем такая странная организация класса модели? Почему не отказались от определения свойств User явно? Была бы и наглядность и дополнение кода от IDE.

Второй вариант, если уж прям так хочется извращаться с подобной реализацией модели, использовать механизм геттеров/сеттеров самого языка:

// age будет высчитывать возраст по birthday
  Object.defineProperty(this, "age", {
    get: function() {
      var today = new Date();
      var yearDelta = today.getFullYear() - this.birthday.getFullYear();

      if (today.getMonth() > this.birthday.getMonth() ||
        (today.getMonth() === this.birthday.getMonth() && today.getDate() >= this.birthday.getDate())) {
        return yearDelta;
      }

      return yearDelta - 1;
    }
  });

Comments

[Artem0071]

Просто мне легче при изменении каких то атрибутов, добавлять их в _changed и просто отправлять на сервер только это, а не проверять каждый раз все атрибуты и хранить 2 одинаковые модели для сравнения

[Андрей Седышев]

Artem0071, это называется экономия на спичках. У вас у модели чей не тыща полей, чтобы огромный трафик генерировать. А нормально написанный сервер сам определит, какие данные поменялись.
Иначе я прошел по всем полям модели, добавил единичку и стёр, и вот грош цена вашим оптимизациям

[Artem0071]

Андрей Седышев, просто приходит данные в одном виде, структурированном, а чтобы обновить данные нужно их в другом формате перегонять

[Андрей Седышев]

Artem0071, есть сервис, отвечающий за работу с АПИ. Это его задача знать, в каком формате бэк ждёт данные для того или иного действия.
Условно, метод update в сервисе UserApiService принимает на вход модель User, формирует нужный запрос, получает ответ и на его основе заполняет новую модель User, которая и является возвращаемым результатом.
Разделение ответственности это называется.

[Artem0071]

Андрей Седышев, я не про то..
Приходит ресурс:
user: {
id: 1,
city: {id:5, name: MSK}
}

А чтобы изменить город, надо отправить patch запрос:
{city: 3}

Как бы «меняется» структура самих данных
Там city лежал в айдишнике, а чтобы изменить, нужно отправить сам city с айдишниклм...
Как то так))

Answer 2

[grinat]

Нахер ты эту дичь творишь? Вуе за тебя уже объявляет реактивные геттеры и сеттеры: https://github.com/vuejs/vue/blob/dev/src/core/obs... там two way binding и все остальное уже есть.