🔛 🎓 🎂 井字游戏，第3部分：使用命令存储撤消/重做 📊 💃🏿 🙆🏾

井字游戏第0部分：比较苗条和反应
 井字游戏第1部分：Svelte and Canvas 2D
井字游戏第2部分：无状态复原/重做
井字游戏，第3部分：使用命令存储撤消/重做
井字游戏第4部分：使用HTTP与Flask后端交互

在这一部分中，我们将讨论使用“命令”模式实现井字游戏的方法，该方法存储撤消/重做团队而不是存储各个状态，并且可以随机访问游戏历史的每个步骤。

本文的上一部分以以下代码结尾： REPL代码。

我们注释掉所有在进行更改时会产生错误的代码。我们用以下单位填写比赛场地的所有单元格： REPL上的代码

添加了状态存储。现在，比赛字段显示状态存储库的内容。默认情况下，比赛场地充满了平局。在App组件中添加了状态输出。

我们将Command类添加到了helpers.js文件中。 历史记录类已更改为存储命令而不是状态。

在这里，我无法执行正确的状态更新。如果有人知道，请告诉我。而且，一般而言，是否可以通过这种方式使用状态存储？

添加了禁止点击已经填充的单元格的权限。 Command类的构造函数执行了移动的转换。更正了状态输出。

在之前的阶段，对于正确使用单独的状态存储存有疑问，因此将其删除，并将比赛场地的状态存储转移到History类-添加了状态字段。

RELP代码
添加了步骤列表的输出。通过顺序执行对选定团队的“撤消”或“重做”命令，可以随机访问游戏的任何步骤。

RELP代码
优胜者确定已经完成。添加状态存储以显示状态。

使用状态存储移动历史更易于使用，但在内存中却很昂贵，因为在每个步骤中，都将复制整个游戏状态。对于大型模型的应用程序，最好在历史记录中使用命令存储。

在本地计算机上安装游戏：

git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev

我们在以下地址的浏览器中启动游戏： http：// localhost：5000 / 。

井字游戏，第3部分：使用命令存储撤消/重做