您可以在不更改渲染数据的情况下更新 Vue Pinia 存储吗？或者更确切地说，只渲染一个数据更改？

Question

我正在使用带有脚本设置的 Vue3 组合。我正在使用 pinia 商店。

我有一个 SPA，用户可以逐渐更改数据，这些数据存储在历史数组中。 可以通过重置页面并逐步运行此历史数组来重新创建所有用户的更改。

当你运行历史数组（for循环）时，网页不会更新，因为JS是单线程的。这个游戏大约需要 1-2 秒，所以我想要一个进度条来显示“for”循环的进度。但我不希望页面的其余部分随着商店的每次更改而更新，因为它是通过历史数组进行更改的（当然，作为 vue，您通常确实希望所有内容都更新！）。

所以我想知道的是；您是否可以进行通常会导致 vue DOM 更新的更改，但要等到 for 循环完成后再更新？但是在 for 循环中，只更新进度条，这样您就可以看到正在发生的事情？

我可以使用进度条来更新

await sleep(0)

哪里

export function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }

但是，这当然会更新整个页面，而不仅仅是进度条。

这可能吗？

Answer 1

如果有开箱即用的解决方案，我会对它感兴趣。

我会做 Estus Flask 在评论中提到的同样的事情：在重播循环期间使用临时对象，并仅在最后用最终结果更新你的 pinia 存储。

如果是一个简单的用例，另一个解决方案是执行以下操作：您的组件从 pinia 存储获取计算属性（正在进行重播和要显示的数据），但渲染基于另一个“数据”属性。然后在 pinia 商店的这两个数据上放置一个观察器，以更新本地

data

以反映 pinia 商店中的更改。

类似这样的事情：

  watch: {
    dataFromPiniaStore: function (v) {
      if (!this.replay) {
        this.dataInsideComponent = this.dataFromPiniaStore
      }
    },
    replay: function (v) {
      if (!v) {
        this.dataInsideComponent = this.dataFromPiniaStore
      }
    }
  }

这样就可以了。