VueJS - Невозможно присвоить значение из mapState свойству данных после перезагрузки страницы

Question

Невозможно присвоить значение из mapState свойству data после перезагрузки страницы, оно работает, если вы переходите на дочернюю страницу, но нет, если вы уже стоите на дочерней странице и перезагружаете браузер.

Вычисленное mapState

computed: {
  ...mapState({
    tsStore: state => state.SchemeStore
  })
}

Свойство данных

data () {
  return {
    works: '',
    offTime: '',
  }
}

Установлено

if (this.tsStore.singleView) {
  // Set data based on api.
  let single = this.tsStore.singleView
  this.works = single.works
  this.offTime = single.offTime
}

После перезагрузки works и offTime становятся пустыми в свойстве data.

Answer 1

Да, проблема в том, что state обновляется после того, как компонент mounted;Итак, метод updated вызывается вместо mounted.Это видно из этой скрипки, где вызов API моделируется с помощью setTimeout:

https://jsfiddle.net/eywraw8t/369915/

Я думаю, что лучший способ обновить компонент - использовать computed properties,где Vue реализует прокси для отслеживания изменений, например, эту скрипку:

https://jsfiddle.net/3mn2xgvr/

Я переместил изменения в вычисляемые свойства, чтобы при изменении состояния в Vuex все данные, которые зависят от этогоменяется.