VueJS - 重新加载页面后无法将值从 mapState 分配给数据属性

Posted 2023-02-23

【中文标题】VueJS - 重新加载页面后无法将值从 mapState 分配给数据属性

【英文标题】：VueJS - Can't assign value from mapState to data property after reloading the page

【发布时间】：2019-02-20 12:43:15

【问题描述】：

重新加载页面后无法将 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 后，数据属性为空。

【问题讨论】：

它现在似乎可以工作了，我将 mounted 挂钩内的代码移到了 updated 挂钩。任何人都可以确认这是正确的方法吗？

我认为 Vuex 商店中的 single.works 和 single.offtime 是在组件安装后加载的。是的，您可以使用updated 钩子，或使用观察者。我认为您最好将works 和offTime 设置为与tsStore.singleView.works 和tsStore.singleView.offTime 分开的计算属性。

【参考方案1】：

是的，问题是在组件为mounted 之后更新state； 因此，调用了updated 方法而不是mounted。 在这个 fiddle 中可以看到，其中 API 调用由 setTimeout 模拟：

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

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

https://jsfiddle.net/3mn2xgvr/

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