Vue 3 在 Vue App 外自动更新数组

Question

我有一个简单的评分应用程序，它使用 Vue 3 来维护分数和总分。我有一个包含所有分数的全局 teams 对象。我的 Vue 3 应用程序在自身内部非常愉快地更新了我的分数，但我还需要访问 Vue 应用程序外部的 teams 对象来执行其他非用户界面活动，例如保存等。我想让它们保持同步。

我的全局 teams 对象如下所示：

let teams = [];
teams[0] = {
    players: [
      { name: "Player 1" },
      { name: "Player 2" }
    ],
    scores: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  };
teams[1] = {
    players: [
      { name: "Player 1" },
      { name: "Player 2" }
    ],
    scores: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  };

我 link 它到我的 Vue 3 应用程序是这样的：

data() {
      return {
        home: teams[0],
        away: teams[1]
      };
    },

如果我在 Vue 中更新 home 或 away 对象的分数，全局 teams 对象未更新。例如，我有一个依赖于 teams 对象的保存功能（在 Vue 之外）与 home 和 [=24] 的更新保持同步=]离开.

有办法吗？我做错了吗？我可以将我的保存功能移到 Vue 中，但我试图分离出我的用户界面逻辑。我确实有其他功能需要访问同步的 teams 对象，我不想将所有内容添加到 Vue 应用程序中。

提前致谢。 J.

Answer 1

您可以使用 computed getter 和 setter 而不是 data:

computed: {
  home: {
    get() { return teams[0] },
    set(val) { teams[0] = val }
  },
  away: {
    get() { return teams[1] },
    set(val) { teams[1] = val }
  },
}

Answer 2

我似乎确实找到了一个丑陋的解决方案。我只是在 Vue 3 更新期间将 home 和 away 对象复制回 teams 对象，如下所示：

updated() {
   teams[0] = this.home;
   teams[1] = this.away;
}

虽然它有效，但它看起来确实有点笨拙，因为它复制了整个对象，而不仅仅是改变的部分。

Vue 3 在 Vue App 外自动更新数组

Vue 3 Automatic Update Array Outside Vue App

javascript

vuejs3