简介
apollo-mutation-state 是一个针对 Apollo 客户端的 npm 包，它可以帮助您更好地管理客户端 applications 中的数据。它为您提供了一个简单而强大的机制来跟踪您的 Apollo mutations 的状态，以便更好地选择如何根据这些信息更新您的用户界面。
它让您编写更少的代码、更快的应用程序，并更好地控制应用程序状态。您可以使用该包库，更轻松地管理数据的状态，并以引人注目、响应式的方式向用户显示数据。
本文将详细介绍 apollo-mutation-state 的使用方法，对于刚刚接触该包的开发者，可以学习其使用，对于早已接触该包的开发者，可以更好地了解如何使用该包库，进行更轻松的开发。
安装
使用 npm 命令来安装 apollo-mutation-state，具体命令如下：
npm install apollo-mutation-state
使用
使用 apollo-mutation-state 包，需要首先进行一些配置。对于新手来说，这可能有些困难，但一旦您学会了，您会发现这种方法是一种更佳的方法来管理状态的。
我们可以按照以下步骤来使用 apollo-mutation-state。
步骤 1：创建 mutations
创建数据 mutations，这些 mutations 是指从 apollo 客户端发送到后端服务器的请求。
这里，我们创建一个 login mutation 用于登录系统，具体代码如下：
-- -------------------- ---- -------
------ --- ---- --------------
------ ----- -------------- - ----
-------- ---------------- -------- ---------- -------- -
--------------- ---------- --------- ---------- -
-----
-
-
--步骤 2：初始化 apollo-mutation-state
初始化 apollo-mutation-state 并将 mutations 添加到其中。初始化的代码如下所示：
import { ApolloMutationState } from 'apollo-mutation-state';
const mutationState = new ApolloMutationState([
{ mutation: LOGIN_MUTATION, name: 'login' },
]);接下来，将 mutationState 添加到 app 客户端。
步骤 3：在 app 客户端中使用 apollo-mutation-state
将 mutationState 添加到 app 客户端，以便在需要调用 mutations 时使用该库。
在 Vue 应用程序的脚本中添加以下代码，以使用MutationStateMixin：
-- -------------------- ---- -------
------ - ------------------ - ---- ------------------------
------ ------- -
----- ------
------- ---------------------
------ -
------ -
-- ----
------------- ------ -- -- ----- -------- -----
----------- ----- -- -- ----- -------- -----
--
--
-------- -
----- ------- -
-------------------------------------- ------
------------------
------------------ -
---------- -
--------- -------
--------- -------
--
--
-------- -- -
-------------------------------- ---------------------------------------------------------
------------------------------------- ------
--
-------------- -- -
--------------- - --------------
--
----------- -- -
-------------------------------------- -------
---
--
--
--此代码通过从 app 应用程序中调用 mutationState.mutation('login', {...}) 函数来发起 login mutation 请求。在执行 mutation 请求的过程中，您可以跟踪其状态，并在 UI 中使用这些信息进行更新。
步骤 4：使用状态
在 UI 中使用操作状态，以显示您的 mutations 是否执行以及执行的结果。这里我们在应用程序中使用了 loginLoading 和 loginError 这两个状态变量，以显示登录操作是否在进行中以及登录操作是否出错。
总结
至此，本文详细介绍了 apollo-mutation-state 包的使用方法。通过在您的应用程序中使用该包，您可以更好地管理数据状态，实现更灵活、更强大的应用程序。希望本篇文章对您对于前端开发中的 apollo-mutation-state 使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005604a81e8991b448de75a