前言
Vue.js 是一个流行的 JavaScript 框架，经常用于构建单页应用程序（SPA）和组件化开发。 在现代 Web 应用程序中，前端开发人员通常需要与后台 API 进行交互以获取或发送数据。 在这篇文章中，我们将探讨如何使用 Vue.js 构建单页应用程序与后台 API 进行更好的交互。
使用 Axios 进行 API 请求
在 Vue.js 中进行 API 请求的最佳方式是使用 Axios，它是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。 Axios 支持所有现代浏览器和 IE9+，并且易于使用和集成到你的应用程序中。
安装和配置 Axios
首先，你需要使用 npm 安装 Axios。
npm install axios --save
然后，你需要在 main.js 文件中引入和配置 Axios。
import Axios from 'axios';
Vue.prototype.$axios = Axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {'Content-Type': 'application/json'}
});在上面的代码中，我们创建了一个全局的 Axios 实例，并设置了 baseURL，超时时间和请求头。 您还可以为单个请求覆盖全局配置。
发起 API 请求
现在，您可以在 Vue 组件中使用 Axios 进行 API 请求。 这里有一个示例组件，它使用 Axios 获取一个带有用户列表的 JSON 对象。
-- -------------------- ---- -------
----------
-----
----
--- ----------- -- ------ ----------------- --------- -------
-----
------
-----------
--------
------ ------- -
---- -- -
------ -
------ --
-
--
------- -- -
-------------------------
-------------- -- -
---------- - -------------
--
------------ -- -
------------------
--
-
-
---------在上面的代码中，我们在组件的 created 生命周期中使用了 $axios 来发出 GET 请求，然后存储响应数据在组件的 data 中。
使用 Vuex 管理应用程序状态
当构建一个逐渐变得复杂的单页应用程序时，您可能需要管理应用程序状态的中心存储。 Vuex 是一个面向 Vue.js 应用程序的状态管理库，并且可以使您在应用程序中共享状态和交换数据更容易。
安装和配置 Vuex
首先，您需要使用 npm 安装 Vuex。
npm install vuex --save
然后，您需要在 main.js 文件中引入和配置 Vuex。
-- -------------------- ---- -------
------ ---- ---- -------
--------------
----- ----- - --- ------------
------ -
------ --
--
---------- -
--------------- -------- -
----------- - --------
-
--
-------- -
----------------- -
------ --- ----------------- ------- -- -
-------------------------- ----
------------------------------
-------------- -- -
-------------------------- ---------------
-----------------------
--
------------ -- -
-------------------
--------------
---
---
--
------------------- -
------ --- ----------------- ------- -- -
------------------------------------
-------------- -- -
------------------
--
------------ -- -
-------------------
--------------
---
---
-
--
-------- -
------------- -
------ -------------
--
------------ -
------ ------------
-
-
---
-------------------- - ------在上面的代码中，我们创建了一个 Store 实例，并设置了一个 state 对象来存储应用程序状态。 我们还设置了一些 mutations 和 actions 来更新状态和发起 API 请求（使用 $axios 函数来从全局 Axios 实例中发起请求）。 最后，我们将 Store 实例设置为 Vue.prototype.$store，以便在所有组件中访问它。
在组件中使用 Vuex
现在，您可以在组件中使用 Vuex，以及访问应用程序状态和提交更改的 mutations。 这里是一个示例组件，它使用 Vuex 获取用户列表并将其存储在应用程序状态中。
-- -------------------- ---- -------
----------
-----
----
--- ----------- -- ------ ----------------- --------- -------
-----
------
-----------
--------
------ ------- -
---- -- -
------ -
------ --
-
--
------- -- -
--------------------------------
----------- -- -
---------- - ------
--
------------ -- -
-------------------
---
--
--------- -
------- -
------ --------------------------
-
-
-
---------在上面的代码中，我们在组件的 created 生命周期中使用了 $store.dispatch 来发出一个名为 getUsers 的 action，并将数据存储在组件的 data 中。 我们还使用了 $store.getters 来获取应用程序状态中的 users 对象。
结论
在这篇文章中，我们探讨了如何使用 Axios 和 Vuex 在 Vue.js 中与后台 API 更好地交互。 使用 Axios 进行 API 请求并且使用 Vuex 管理应用程序状态，可以使您构建的单页应用程序更加简单和易于维护。 我们希望本文档对您有所帮助，并且提供了指导意义，以便您可以更好的处理 Vue.js 与后台 API 交互的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67495b7da1ce00635453d726