VueJS-重新加载页面后，无法将mapState的值分配给data属性

Question

重新加载页面后无法将mapState的值分配给data属性，如果您转到子页面，则无法工作，但如果您已经站在子页面并重新加载浏览器，则无法使用。

计算出的地图状态

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。 在这个小提琴中可以看到，其中setTimeout模拟了API调用：

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

我认为更新组件的最佳方法是使用computed properties，其中Vue实施代理来监视更改，例如这样的小提琴：

https://jsfiddle.net/3mn2xgvr/

我将更改移至计算属性，因此当Vuex中的状态更改时，所有依赖于此的数据都会更改。