Vue.js 是一个流行的 JavaScript 前端框架，用于构建现代单页面应用程序（SPA）。SPA 同时具有复杂的数据流和状态管理。本文将介绍 Vue.js 中实现数据请求和状态管理的最佳实践。
数据请求
单页面应用程序通常使用 REST API（Representational State Transfer 应用程序编程接口）进行数据请求。将所有与后端 API 的交互放在单独的服务中有助于您的代码集中在前端 UI 层而不是数据层，促进代码的可重用性和维护性。
Vue.js 将异步请求与组件紧密集成。你可以使用任何数据请求库，例如 axios 或 fetch，但是你必须确保请求的异步函数返回一个 Promise，因为 Vue.js 组件的数据应该需要异步地请求数据。例如：
------ ----- ---- --------
------ ------- -
------ -
------ -
------ -----
--
--
----- --------- -
----- --- - ----- ------------------------
---------- - ---------
--
--上面的代码表明在组件被创建时异步请求 /api/users 路径的数据，然后将响应的数据保存在组件的 users 数据属性中。当数据准备好时，组件将自动更新视图。
状态管理
Vue.js 在数据的管理上是灵活的。你可以使用组件实例本身作为管理状态的“store”，也可以使用 Vuex 作为集中管理状态的方案。如果你发现你的代码越来越混乱，那么使用 Vuex 是一个很好的选择。
Vuex 是状态管理库，可以在整个应用程序中集中管理状态。它使用了 Flux 应用程序架构，其中数据在应用程序中是单向流动的。Vuex 定义了一个中央存储库（store），该存储库使其易于在整个应用程序中共享数据并进行更改。下面是如何设置 Vue.js 应用程序与 Vuex：
------ --- ---- ------
------ ---- ---- -------
------ ----- ---- --------
--------------
------ ------- --- ------------
------ -
------ -----
--
---------- -
---------------- ------ -
----------- - ------
--
--
-------- -
----- ------------ ------ -- -
----- --- - ----- ------------------------
------------------- ----------
--
--
---在上例中，我们使用 Vuex 存储库来定义了一个名为 users 的数据状态。我们还定义了一个 mutation，该 mutation 将设置我们存储库中的 users 属性。我们之后的 actions 中使用异步函数的方式调用 API 并分发 mutation 来更新 users 数据。最后，我们可以在我们的任何组件中使用数据：
------ - --------- ---------- - ---- -------
------ ------- -
--------- -
-------------
------ ------- -- ------------
---
--
--------- -
------------------
--
-------- -
------------------------------
--
--上面的代码展示了如何使用 mapActions 和 mapState 帮助我们简化代码和组合了 Vuex 的整个流程和 API。现在我们可以在组件中使用我们新的状态和动作，无需考虑它们是如何管理和更新的。
结论
Vue.js 是一个灵活的框架，可以让您自由地选择数据请求方案和状态管理方案。这篇文章提供了 REST API 和 Vuex 的最佳实践。最重要的是，了解 Vue.js 与面向对象编程的区别是非常重要的。如果你将服务器API请求视为一个“方法”，则使用对象应该不成问题。如果你确实想使用其他方法，也要牢记要遵循框架建议的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b677a9babaf620fab3b92