javascript - 最佳实践 JS API (json) 数据使用、“模型”或 JSON

问题描述

我用 Laravel 和 VueJS（和 Vuex）构建了一个应用程序。我在使用这些框架或前端构建应用程序方面不是很有经验。我想知道在前端使用从 API 接收到的数据的最佳实践或最佳方式是什么。

我的应用程序有例如包含 1 个或多个用户的帐户。前端显示例如所有帐户的概述以及所有用户的列表（例如管理目的）。我的 API 返回类似这样的内容（示例）：

一些上下文来解释我的问题：

// When fetch account(s)
data: {
  account: {
    id: "a1",
    name: "Account1",
  },
  accounts: [
    acount x,
    account y,
    ...
  ]
}  
// When fetch user(s)
data: {
  user: {
    id: "u1",
    name: "User1"
  },
  users: [
     ...
  ]
}

从性能来看，我认为最好将 API 中的 json 对象直接保存在商店中。我将使用商店中的 JSON 对象来填充更新视图和概览表。

从软件工程的角度来看，我更喜欢创建 ES6（类）对象。这可以有一些优点：

我可以为用户和帐户对象实现类似save()orupdate()或on 的功能。fetchUsers()这些函数调用例如获取或更新函数（VueX FLUX 存储）。
我可以使用继承，例如save()函数等。
当我需要其他功能时，我可以在对象类中实现它们
也许它还有我还不知道的其他（“模型”）优势

在这种情况下，我会将 json 数据解析为 ES6 类对象，并将这些对象（或对象列表）保存在我的商店而不是 json 对象中。

现在我在寻找：

是否有任何（ES6？）约定可以遵循（找不到它们）或者这种情况的最佳实践是什么？/ 2 个（或其他）选项中的哪一个是要走的路？
在性能或资源使用方面（例如对于移动设备？），创建对象有什么影响。
最终的性能或资源影响是否可以忽略不计？（对对象的数量是否有一种，也许是最佳实践限制？）

我认为网站和我的问题很清楚，但在需要一些额外信息时让我知道。

标签： javascriptvue.jsvuexes6-class

Vuex 等状态管理存储通常推荐的最佳实践是

保持扁平结构，没有嵌套对象
通过对象 ID 规范化条目

在这里存储完整的 ES6 类可能不太适合这里的要求。

欲了解更多信息，请参阅有关该主题的一些演讲和博客：

Vuex 最佳实践 (linusborg)
Vuex 状态规范化
 Vuex 复杂对象最佳实践

您提到您在这些框架方面不是很有经验。您可能想首先问自己 Vuex 是否是正确答案的问题。

引用下面的参考文档，人们倾向于过度使用这些工具，并在学习时使用它来存储“一切”。普遍的共识似乎是只有在真正需要时才在 Vuex 中存储数据（主要用例是多个组件必须访问/更新数据）。

从您的描述中，您的应用程序是否属于这种情况并不完全清楚。

在此处查看更多信息：

Vuex 应该存储哪些数据

javascript - 最佳实践 JS API (json) 数据使用、“模型”或 JSON - 性能、可维护性、资源

问题描述

解决方案

推荐阅读