TL；DR:MobX是流行的州管理库之一。它经常与React和VueJs等JavaScript框架一起使用。另一方面，Auth0是一个针对web和移动应用的身份管理解决方案。在本文中，您将学习如何使用Auth0构建和保护MobX应用程序。在这个GitHub存储库中可以找到功能齐全的应用程序。先决条件你应该有使用React和MobX状态管理构建web应用程序的知识。如果你还需要学习一些东西，这里有一个很好的资源，让你开始。尽管如此，你需要节点.js在你的机器上安装了NPM。如果没有，请按照链接在您的机器上进行设置。介绍状态管理是软件应用程序的主要话题之一，物联网的前景，React应用程序也不例外。它是默认情况下React附带的众多功能之一。难怪有些人甚至把React称为州管理库。由于国家管理的重要性，许多解决方案涌现出来，试图使之更容易。MobX是三个常用的选项之一，可以帮助您在React应用程序中管理状态。其他选项包括React Context API和Redux。MobX使用了一种更加被动的状态管理方法。MobX的一些核心概念包括：可观察状态：有了这个概念，你可以让一个对象在更新时发出新的变化。它们通常用@observable decorator来表示。观察者：观察状态发生变化时通知观察者。因此，可观察状态和观察者携手合作。计算值：计算值用于从可观察状态导出值。假设你有一个函数，它处理一个标记为@observable的对象。任何时候对象改变，函数都会自动计算并导出值。计算值通常用@Computed decorator表示。操作：这些是修改状态的函数。通常，您将为修改可观察值的函数使用操作。它们用@action decorator表示。反应：MobX反应与计算值相似。但是，一个反应不仅不会产生新的值，反而会引发副作用（副作用）。有三种类型的反应函数-当，自动运行和反应。MobX不仅仅是一个React库，它还与其他JavaScript库和支持web应用前端的框架兼容。如果你能用一点官方的知识和资源做这件事。"MobX使用了一种更具反应性的状态管理方法。"在推特上留言你要建造什么在本教程中，您将构建一个购物车。这是电子商务应用程序中常见的功能，用户可以在购物车中添加或减去商品。实现购物车需要跟踪用户希望购买的产品、它们各自的数量和价格。您将使用MobX在应用程序中存储和管理购物车数据。该应用程序还需要用户登录才能访问购物车，而Auth0也将在这里出现。您将使用Auth0处理应用程序中的身份验证。您可以在这个repo上找到本文中使用的全部代码。搭建你的React应用程序引导React应用程序的最快方法之一是通过createreact-app包。您将使用这个来引导您的项目。如果您使用的是旧版本的create react app，信息大数据，则必须按照此处的说明进行更新。打开终端窗口，大数据时代是什么意思，移动到您选择的目录，然后运行以下命令：npx create react app auth0 mobx应用程序这将在运行命令的目录中生成一个名为auth0 mobx app的新项目。这个过程需要几分钟。"通过引导应用程序做出反应是最快的反应之一。"在推特上留言现在您已经生成了项目，下一步要做的理想事情是安装开发应用程序过程中所需的依赖项。如果您还不在MobX应用程序的目录中，请使用以下命令移动到该目录：cd auth0 mobx应用程序之后，继续运行以下命令安装依赖项：npm安装mobx mobx react react router react router dom@auth0/auth0 spa js此命令将安装以下依赖项：mobx：这是支持状态管理的主要mobx库。mobx react：这个库包含通过mobx提供的react特定函数。react router dom和react router：这些库将用于向应用程序添加页面导航。auth0 spa js：这是auth0客户端库。设置MobXMobX使用decorator来处理其状态管理，React默认不支持decorator。因此，您将安装一个babel插件@babel/plugin-proposition decorators。不过，在终端上，运行以下命令：npm install@babel/plugin建议装饰器安装后，您必须弹出React应用程序才能配置您刚刚安装的babel插件。要弹出React应用程序，请在终端上运行以下命令。请确保在运行以下命令之前将代码提交给git：npm运行弹出此命令将一些脚本弹出，并在node\u modules中最初配置到项目文件夹中，以便您获得如下所示的项目结构：之后，添加您刚刚安装的babel插件的配置。在项目目录中创建一个.babelrc文件，并将以下配置添加到该文件中，如下所示：//巴别尔克{"预设"：react app"]，"插件"：[["@babel/plugin建议装饰器"，{"遗产"：没错}]]}为了避免与babel插件配置冲突，您需要在中删除现有的babel配置包.json. 打开包.json文件并从文件中删除此代码段："巴别塔"：{"预设"：["react应用程序"]}现在，免费网站自助建站，您需要为应用程序创建一个存储。商店在MobX应用程序中通常是强制性的。拥有它们的一个要点是，它们可以帮助您将组件中的逻辑和状态转移到一个独立的可测试单元中，该单元可以在前端和后端JavaScript中使用。如果你想编写可维护和可测试的应用程序，这通常是个好主意。继续创建一个商店.jssrc文件夹中的文件。创建文件后，将此代码段粘贴到其中：//src公司/商店.js类存储{产品=[{编号：1，name:'Tshirt sleeker'，description:'完美贴合'，价格：50，image:require（'./img/image-1.jpg'）},{编号：2，name:'Tshirt sleeker'，description:'完美贴合'，价格：350，image:require（'./img/image-2.jpg'）},{编号：3，name:'Tshirt sleeker'，description:'完美贴合'，价格：250，image:require（'./img/image-3.jpg'）}];推车=[]；当前购物车=[]；从购物车中移除（id）{这是推车= 这个。推车。过滤器（项目=>{返回商品编号!==身份证；});这个.getCart();}增量数量体现（id）{这个.carts.map（项目=>{如果(商品编号===id）项目数量+=1；退货项目；});这个.getCart();}减少数量体现（id）{这个.carts.map（项目=>{如果(商品编号===身份证项目数量>（一）项目数量-=1；退货项目；});这个.getCart();}地址（id）{let found=错误；这个.carts.map（项目=>{如果(商品编号===id）{项目数量+=1；发现=真；}退货项目；});如果（！找到）{这个。推车。推（{product_id:id，数量：1}）；}这个.getCart();}getCart（）{让手推车=这是推车;手推车.map（项目=>{让我进去这个。产品) {如果(商品编号=== 这个。产品[i] .id）{项目.图像= 这个。产品[i] .图像；项目名称= 这个。产品[i] .名称；项目名称= 这个。产品[i] .说明；项目价格= 这个。产品[i] .价格*项目数量;}}退货项目；});这个。currentCart=手推车；}}导出默认存储；从上面的代码片段中，您创建了一个保存应用程序状态的存储。下面是每个state对象的功能分解：产品-这是一个数组，它将存储用户可以添加到购物车中的所有可用产品。在这里，产品中有三个硬编码项。购物车-这是一个数组，将存储用户添加到购物车中的项目。currentCart—这也是一个空数组，它类似于carts数组。但当用户进入系统或登录到系统时，这会保持购物车的初始状态。removeFromCart-此函数将用于从carts数组中移除项目。increaseQuantityIntranet-此函数用于增加carts数组中特定项目的数量。DecreaseQuantityIntranet-此函数用于减少carts数组中特定项目的数量。addToCart—此函数将用于向carts数组添加新项。getCart-此函数返回carts数组中的所有数据。创建组件在本节中，您将为您的应用程序构建各种组件。在开始构建之前，您需要添加引导和字体很棒的CDN链接。你将使用它们来设计你的应用程序。向公众开放/索引.html将这些链接归档并添加到标记中：，商业大数据分析