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

Question

Как видно из темы, в моем магазине vuex есть определенный элемент, который я добавляю в свой компонент в разделе вычисляемых свойств с помощью mapState.Вот код для этого:

computed: mapState({
  orderTitle: state => state.order.bookTitle,
}),

Когда я проверяю это в разделе Vuex Vue Dev Tools, я вижу, что он точно получает данные из хранилища.

Теперь проблема.

У меня есть поле ввода текста, в которое я поместил v-model, и связал его со свойством data.Я хочу предварительно заполнить это текстовое поле текстом, найденным в orderTitle, который я получаю из моего store.

Я попытался сделать это, просто присвоив значение в вычисляемом свойствесвойство data в хуке mounted.Однако это не сработало.

Когда я попытался устранить неполадку, выполнив console.log(this.orderTitle), чтобы увидеть значение вычисляемого свойства в смонтированном хуке, оно оказалось пустым.

Почему значение правильно отображается в Vue Dev Tools (и даже в консоли, когда я делаю $vm0.orderTitle), но не в смонтированном хуке?

Есть мысли?

Спасибо!

Answer 1

Я понял это.Вместо выполнения действий в смонтированном хуке, я сделал это в обновленном хуке, который запускается намного позже в жизненном цикле экземпляра Vue (после того, как Virtual DOM будет перерисован и исправлен).

Answer 2

Похоже на проблему "этой области видимости".

Попробуйте с

computed: mapState ({orderTitle (state) {return state.order.bookTitle}}),