2

我正在开发我的第一个 Vue 3（以及 vuex 4）应用程序，它来自一个非常扎实的 Vue 2 背景。

我有一个组件通过 vuex 操作加载数据，然后通过返回值访问存储setup()

  setup() {
    const store = useStore();
    const fancy = computed(() => store.state.fancy);
    return { fancy };
  },

fancy这是一个深度嵌套的对象，我认为这可能很重要。

然后我想根据值的变化来运行一个函数，所以我watch在我的mounted()生命周期钩子中设置了一个

 watch(
      this.fancy,
      (newValue) => {
        for (const spreadsheet in newValue) {
          console.log(Object.keys(newValue[spreadsheet].data))
          setTimeout(()=>{
            console.log(Object.keys(newValue[spreadsheet].data))
          },500)
          ...

我尝试onMounted()在 setup 中使用新的钩子watchEffect，store.watch但是我无法让 watch/watchEffect 在 onMounted 钩子中可靠地触发，并且 watchEffect 似乎永远不会根据我计算的存储值进行更新。如果您对此有所了解，那将很方便。

不过，我真正的问题是，我的观察者似乎在值更新之前被调用。例如，我的代码[]为第一组键注销，然后半秒后一个完整的数组。如果是某种渐进式的数据填充，那么我预计会再次调用观察者，并使用新的newValue. 我也试过了。flush,deep和的所有排列都immediate对我的观察者无济于事。nextTick()s 也没有工作。我认为这一定与我对新的反应性变化缺乏了解有关，但我不确定如何解决它，并且在我的应用程序中添加随机延迟似乎显然是错误的。

谢谢你。

4

0 回答 0