简单的状态管理JavaScript保姆状态

保姆国家使得编写基于状态的响应式应用程序变得超级容易。如您所见，构建对用户交互做出反应的动态基于状态的应用程序不需要太多代码。这就是保姆国家的魅力所在。

真假测验

现在我们已经看到了一个基本的例子，让我们试着做一些更复杂的东西。我们将使用保姆国家来构建一个真假问答游戏。在CodePen上打开一个新笔，然后跟着做。

我们将以同样的方式开始，通过导入保姆国家库:

进口｛保姆，超文本标记语言}从“https://cdn.skypack.dev/nanny-state”

接下来，我们将创建状态对象，并用游戏将使用的初始属性值填充它:

常量状态=｛分数：0，指数：0，问题：(｛问题：“保姆国家”是指国家雇佣保姆的国家。，回答：假}，｛问题：“保姆国家也是啤酒的名字”，回答：真正的}，｛问题：“米拉·库尼斯和阿什顿·库彻雇佣了16名保姆来帮助抚养他们的孩子”，回答：假}，｛问题：《保姆麦克菲》系列电影改编自《护士玛蒂尔达》系列小说，回答：真正的}，｛问题：“保姆国家使用µhtml库进行渲染”，回答：真正的}，］}

该对象包含3个属性:

• 分数-这将记录玩家正确回答了多少问题，并从0开始
• 指数-这将跟踪玩家的问题，并对应于最后一个属性是问题数组中。
• 问题-这是一个对象数组问题和回答属性。的问题属性是一个字符串回答属性是布尔值

现在我们已经创建了数据，让我们创建视图为了可视化这些数据:

常量视图=状态= >超文本标记语言｀<h1>对还是错?h1><h2>分数:$ {状态。分数}h2>$ {状态。指数<状态。问题。长度？超文本标记语言｀<p>$ {指数+1}）$ {状态。问题(状态。指数］。问题}p><按钮onclick=$ {状态。checkAnswer（真正的）}>真正的按钮><按钮onclick=$ {状态。checkAnswer（假）}>假按钮>｀：超文本标记语言｀<h2>比赛结束，你进球了$ {状态。分数}h2>｀}｀

这有点复杂视图比我们在前面的例子中看到的要多，但是大部分应该是不言自明的。方法显示标题标题之后的分数分数的属性状态对象。然后我们使用三元运算符来派生视图。因为视图是使用模板文字编写的，所以不能使用if - else语句要fork代码，所以需要使用三元语句。

这个三元语句检查ifquestionNumber是小于长度的问题数组，它基本上是检查是否还有任何问题需要回答。如果有，则问题显示有两个按钮，选中为TRUE，选中为FALSE。如果没有问题，我们就会显示GAME OVER信息，同时显示玩家的分数。

在使用三元操作符拆分视图代码时要注意的一件事是，您需要使用超文本标记语言函数用于每个新fork。

这两个按钮都有一个内联onclick事件监听器附加到它们，调用相同的事件处理程序，checkAnswer并接受任何一种论证真正的或假取决于按的是哪个按钮。现在让我们编写这个事件处理程序:

常量checkAnswer=回答= >事件= >更新（状态= >（｛分数：回答＝＝＝状态。问题(状态。指数］。回答？状态。分数+1：状态。分数，指数：状态。指数+1}））

此事件处理程序接受额外的参数回答以及事件所有事件处理程序都接受的对象，因此需要使用上面所见的双箭头符号对其进行curry。它调用更新函数，该函数使用三元运算符检查作为参数提供的答案是否与当前问题的答案匹配，如果匹配，则分数属性增加1，否则分数保持不变。的值也会增加指数属性，因此将显示下一个问题。

事件处理程序现在需要添加到状态，连同视图。我们可以用对象简写法来做，只要checkAnswer和视图之前定义过状态：

常量状态=｛分数：0，指数：0，问题：(｛问题：“保姆国家”是指国家雇佣保姆的国家。，回答：假}，｛问题：“保姆国家也是啤酒的名字”，回答：真正的}，｛问题：“米拉·库尼斯和阿什顿·库彻雇佣了16名保姆来帮助抚养他们的孩子”，回答：假}，｛问题：《保姆麦克菲》系列电影改编自《护士玛蒂尔达》系列小说，回答：真正的}，｛问题：“保姆国家使用µhtml库进行渲染”，回答：真正的}，］，checkAnswer，视图}

现在一切都是状态，剩下要做的就是定义更新函数调用保姆功能和提供状态作为论点:

常量更新=保姆（状态）

就是这样!测试应该立即开始，你应该能够回答每个问题，分数将根据答案是否正确而变化。另一个交互式应用程序的例子，可以用最少的代码快速构建。试着回答这些问题，看看进展如何。你可以在下面的CodePen中看到完成的代码: