Как правильно получать параметры и реагировать на их изменения?

Question

[Евгений Лубяной]

День добрый!
Имеется примерно такая структура (упрощенная)

в child:
watch: {
userid(value) { ... },
},
mounted() { ... }

при инициализации parent стучится на сервер, получает данные пользователя и сохраняет в user, вотчер child'а видит изменения и корректно отрабатывает. Все ок.

перехожу на другой роут, затем жму назад и... все плохо
вотчер child не выполняется, т.к. user уже имеется и ничего не меняется.
можно ли при инициализации child как-либо вызвать вотчер?
разумеется можно внести весь вотчер в отдельный метод и вызывать уже его, но выглядит как-то не совсем правильно

Как правильно получать параметры и реагировать на их изменения?

Answer 1

[Evgeny Kulakov]

Т.е. у вас компонент, когда назад переходишь по новой не маунтиться уже?
Если mounted все-таки вызывается, то установив по дефолту userid в null например, вотчер в итоге должен вызваться имхо.
Еще дока говорит, что можно так делать:

watch: {
    // строка с именем метода:
    b: 'someMethod'
}

Comments

[Евгений Лубяной]

Спасибо! Теперь в mounted устанавливаю значения по умолчанию и вызываются вотчеры!
просто не хотел бы код вотчера выносить из него, там всего 5 строк, но они логически ну только к нему относятся.

[Евгений Лубяной]

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

[Evgeny Kulakov]

Не надо присваивать, надо задать дефолтное значение типа вот такого:

props: {
    user: {
      default: null
    }
  }

[Евгений Лубяной]

Evgeny Kulakov: в моем случае это не помогает

Answer 2

[JSmitty]

По возможности старайтесь не использовать вотчеры совсем. Для обновления интерфейса в дочернем компоненте можно в подавляющем большинстве случаев использовать computed properties, вычисляемые из передаваемых снаружи props. Или рассмотрите хотя бы частичную интеграцию vuex для связи компонентов в иерархии.

Comments

[Евгений Лубяной]

Странно что нет ни одного нормального места, где бы реагировалось на выставление свойств. надо в двух местах разных писать, некрасиво

[Евгений Лубяной]

почему не стоит использовать вотчеры?

[JSmitty]

Вотчеры добавляют вашим компонентам непредсказуемость поведения данных. Т.е. смотрите, у вас из props приходят какие-то внешние данные. Вместо того, чтобы нормально их обрабатывать через computed (которые кэшируются, а не перевычисляются по каждому чиху), вы делаете какую-то постобработку и (потенциально) модифицируете состояние компонента. Через пару-тройку месяцев вы заново откроете компонент (например, чтобы полечить баги), и будете удивляться, почему же при определенных значениях у вас в состоянии (секция data) оказывается что-то странное. Особенно актуально, когда компонент большой (сотни-тысячи строк). Иногда этот костыль с вотчерами неминуем (если без vuex пишете), но надо всегда отдавать себе отчет, что это - небезопасно.

PS Для наблюдающих за темой, компоненты иногда вынужденно приходится клеить в одно и получать огромных монстров - так, в IE 11 наблюдали очень серьезные утечки памяти при использовании множества инстансов vue-multiselect (крэш браузера через 4-5 обновлений страницы).

[Евгений Лубяной]

у меня они такие

watch: {
  userid(value) {
    if (value) {
      this.ownerid = value;
      this.mode = 'user';
      this.loadPosts();
    }
  },
  groupid(value) {
    console.log('set group_id', value);
      if (value) {
        this.ownerid = value;
        this.mode = 'group';
        this.loadPosts();
      }
    },
  },

с исходными userid и groupid больше компонент не работает

[JSmitty]

Из такого кода я бы сказал, что иерархия компонентов не очень корректно спроектирована. Лучше прогружайте данные уровнем выше, а в этот компонент их спускайте через свойство value. И реализовывайте v-model для этого компонента. Это может быть сложно на первых порах, но гибкость выше и в дальнейшем вам же будет проще.

Еще рекомендую сделать loadPosts() чистой функцией, возвращающей ошибку или данные в промисе, на входе аргументом - id. Вызов будет такой -

this.loadPosts(this.ownerId)
        .then(res => { this.posts = res; })
        .catch(err => alert('Что-то пошло не так: ' + err));

Чем не очень хорош Vue.js - так это тем, что структурированию приложений в официальной документации не уделено должного внимания. В отличие, например, от React (где поднятие состояния и различие между "глупыми" компонентами и контейнерами четко объясняется). Пока новичок созреет ножкой пощупать воду во vuex - может много времени пройти.

[Евгений Лубяной]

JSmitty: спасибо за коментарий, не все имеет смысл в конкретно этом случае, однако передавать уже готовые данные действительно будет удобнее