vue.js - 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 在数据属性中变空。

Answer 1

是的，问题是 state 在组件被 mounted 后更新；因此，将调用 updated 方法而不是 mounted。在这个 fiddle 中可见，其中 API 调用由 setTimeout 模拟:

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

我认为更新组件的最佳方法是使用计算属性，其中 Vue 实现了代理来监视变化，就像这个 fiddle 一样:

https://jsfiddle.net/3mn2xgvr/

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