时间戳

首页 > 解决方案 > vue js 数据设计策略 - 来自 API 的复杂 JSON 对象或具有 PK/FK 关系的简单 JSON 对象

json - vue js 数据设计策略 - 来自 API 的复杂 JSON 对象或具有 PK/FK 关系的简单 JSON 对象

问题描述

我正在设计一个 vue.js (vue2) 应用程序，它需要从 3NF 中的 4 个数据库表派生的复杂数据集。将使用 axios 将数据调用到 PHP 端点，该端点将从本地 MSSQL 获取数据。从概念上讲，数据的形状如下：

{
    Collection-A [
        {
          Obj1:{
            Obj1.field1,
            Obj1.field2
          },
          Obj2:{
            Obj2.field1:,
            Obj2.field2:
          },
          Collection-B:[
             {
                  CollB.field1,
                  CollB.field2,
                  CollB.Collection-C:[
                      {
                          CollC.field1:,
                          CollC.Collection-D:[0,1,2],
                          CollC.Obj3:{
                            Obj3.field1:,
                            Obj3.field2:,
                            Obj3.field3
                          },
                          CollC.Obj4:{
                            Obj4.field1:
                            Obj4.field2:
                          }
                      }...repeat Collection-C
                  ]
             }...repeat Collection-B
          ]
        }..repeat Collection-A
    ]
}

我的问题是如何最好地为性能、理解和重用数据建模。

选项 1 或 2 感觉是最干净的解决方案，因为 API 可重用且易于测试。不幸的是，GraphQL 在我当前的环境中不是一个选项。任何建议将不胜感激。

标签： jsonvue.jsvuejs2api-design

解决方案

很难给出任何具体建议，因为您的数据模型示例非常简单，并且缺少一些重要信息，例如：

  1. 数据的基数是多少？Collection-B/C 中只有少数对象被 Collection-A 中的许多对象使用吗？（换句话说，去规范化时数据膨胀了多少）
  2. 您如何在应用程序中使用数据？也只是查看或更新？是否需要更新 B/C 集合对象？
  3. 在任何给定时间，您的应用程序需要整个数据集的多少？
  4. 用例呢？感知绩效对您来说有多重要？是否可以仅加载和显示集合 A 中的对象（在某种网格中）并在需要时在后台或按需加载其余数据？

您需要考虑所有要求（或为自己设置一些要求），而不仅仅是技术方面。

无论如何，这里有一些想法：

  • 鉴于您的数据已经以正常形式存储，选项 1 感觉最好。例如，您可以使用Vuex ORM 之类的库来简化您的工作（如果不愿使用“另一个 3rd 方库”，请单独考虑 Vuex - 它由 Vue 核心团队维护）。
  • 如果需要更新集合 B/C 对象，我强烈推荐这种方法（因为当您需要更新相同数据的多个副本时会很困难）
  • 内存中的数据表示和“传输中”是不同的东西。您可以决定将数据保持为正常形式，但出于性能原因将其非规范化加载（Vuex ORM 使这变得简单- 也可用于测试）
  • 如果您一次不需要所有数据，请考虑使用延迟加载

推荐阅读