javascript - JS API (json) 数据使用最佳实践， "models"或 JSON - 性能、可维护性、资源

Question

我使用 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 对象来填充更新 View 和概览表。

从软件工程的 Angular 来看，我更喜欢创建 ES6(类)对象。这有一些优点:

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

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

现在我正在寻找:

• 是否有任何(ES6？)约定可以遵循(找不到)或者这种情况的最佳实践是什么？/这 2 个(或者其他)选项中哪一个是正确的选择？
• 创建对象对性能或资源使用(例如移动设备？)有何影响。
• 最终的性能或资源影响可以忽略不计吗？ (对于对象的数量是否存在一种也许是最佳实践的限制？)

我认为该地点和我的问题很清楚，但当需要一些额外信息时请告诉我。

Answer 1

通常推荐用于状态管理存储(例如 Vuex)的最佳实践是

• 保持扁平结构，没有嵌套对象
• 通过对象 ID 标准化条目

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

有关此主题的更多信息，请参阅此处的一些演讲和博客:

Vuex Best Practices (linusborg)
Vuex State Normalization
Vuex Best Practices for Complex Objects

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

引用下面的引用文档，人们往往会过度使用此类工具，并且在学习时使用它来存储“所有内容”。普遍的共识似乎是只有在确实需要时才在 Vuex 中存储数据(主要用例是多个组件必须访问/更新数据)。

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

在此处查看更多信息:

What Data Should Be Stored in Vuex