GraphQL 是一种用于 API 的查询语言，它可以帮助前端开发者更高效地获取数据。Vue.js 是一种流行的 JavaScript 框架，用于构建交互式的用户界面。在本文中，我们将介绍如何在 Vue.js 应用程序中使用 GraphQL。
安装 GraphQL
在使用 GraphQL 之前，我们需要安装它。可以使用以下命令来安装 GraphQL：
npm install graphql
配置 GraphQL
在 Vue.js 应用程序中使用 GraphQL 需要进行一些配置。我们需要创建一个 GraphQL 客户端，该客户端将连接到我们的 GraphQL 服务器并获取数据。
首先，我们需要创建一个 apollo-client.js 文件。在这个文件中，我们将创建一个 Apollo 客户端并配置它：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ----- -------- - --- ---------- ---- -------------------------------- -- ------ ------- ----- --- ----- ----- - --- ---------------- ----- ------------ - --- -------------- ----- --------- ------ --- ------ ------- -------------
在上面的代码中，我们使用 HttpLink 来连接到我们的 GraphQL 服务器，并使用 InMemoryCache 来缓存数据。然后，我们创建了一个 Apollo 客户端，并将连接和缓存配置传递给它。
在 Vue.js 组件中使用 GraphQL
现在我们已经配置了 GraphQL 客户端，我们可以在 Vue.js 组件中使用它来获取数据。
首先，我们需要安装 Vue.js 的 Apollo 插件：
npm install vue-apollo
然后，在 main.js 文件中，我们需要将 Apollo 客户端配置传递给 Vue.js 的 Apollo 插件：
-- -------------------- ---- ------- ------ --- ---- ------ ------ --------- ---- ------------- ------ ------------ ---- ------------------ ------------------- ----- -------------- - --- ----------- -------------- ------------- --- --- ----- --- ------- --------------- -- --- ---
现在，我们可以在 Vue.js 组件中使用 GraphQL。例如，我们可以创建一个 HelloWorld.vue 组件，该组件将获取从 GraphQL 服务器返回的数据：
-- -------------------- ---- -------
----------
-----
------ -------- -------
------
-----------
--------
------ --- ---- --------------
------ ------- -
------- -
--------- ----
----- -
--------
-
--
--
--
---------在上面的代码中，我们使用 gql 函数来定义一个 GraphQL 查询。然后，我们使用 Vue.js 的 apollo 选项来将查询与组件关联。这将自动在组件加载时获取数据，并将其存储在 greeting 变量中。然后，我们可以在组件的模板中使用 greeting 变量来显示数据。
结论
在本文中，我们介绍了如何在 Vue.js 应用程序中使用 GraphQL。我们首先安装了 GraphQL，然后配置了一个 Apollo 客户端。最后，我们创建了一个 Vue.js 组件，并使用 vue-apollo 插件来获取从 GraphQL 服务器返回的数据。通过这些步骤，我们可以更高效地获取数据，并构建更好的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673acbcd39d6d08e88afdf92