vue.js - 如何在 Vue.js 应用程序中使用本地版本的数据对象？

Question

我正在使用 Vue.js 和 vuex 处理来 self 通过 api 访问的后端存储的数据。我的问题可能更多地是关于语义以及如何实际提出这个问题并寻找更好的答案，因为我什至不知道要搜索的正确术语。所以这里...

在我的 vue 代码中，我调用了我的后端 api，它返回了一个 json blob，其中包含我想在 ui 中使用的数据 block 。那里没有问题。但随后我需要稍微修改该数据以将其呈现给用户。这需要评估一些字段并更改它们(例如，如果值为 0 则放入“n/a”等)，也许在一些字段上做一些数学运算等等。然后我在网格/表格中将其呈现给用户。我希望用户也能够对字段进行排序和搜索。因此，我可能会显示来自后端的名为 fullName 的字段，但允许用户对实际上不在网格中的名为 lastName 的字段进行排序。

话虽如此，我的问题是——我是否应该在代码中创建一个“转换器/还原器”来将来自 api 的数据对象转换为我需要的 ui 对象？或者我应该编写多个过滤器(我的意思是 Vue.js 过滤器直接在带有“|”管道的 html 中)直接修改 html 模板中的字段？我担心的是，一旦我修改了从 api 返回的对象，如果我必须发布/修补/放回某种更新，那么我需要一个“反向”转换器来返回到我的 api 想要看到的对象.

一般来说，我想我的问题可以归结为“我如何在本地处理 api 响应对象，以便我可以保持它的‘纯度’？”或类似的规定。我显然在摸索正确的术语，这就是为什么我什至在谷歌上都在努力寻找关于这个主题的信息。为此，我深表歉意，如有任何帮助，我们将不胜感激。

此外，我意识到我的问题与 Vue 无关，因为这个问题适用于任何数据驱动的 UI 框架。

Answer 1

我想我现在明白你的意思了。您只想知道是否需要在使响应可供 UI 使用之前修改响应。假设您正在使用 axios。我在 Vue 中要做的是使用 response.data 对象作为数据注入(inject)到 vue data 属性中。例如，您的 response.data 返回一个对象数组。您可以像这样在 Vue 中硬编码数据变量:

data () {
    return {
      apiData: []
   }
}

通过 API 响应，像这样设置数据数组:

const response = await axios.get(...);
this.apiData = response.data.filter(item => return item.foo === bar);

现在 apiData 包含响应数据的过滤版本，该数据是异步检索以进行处理的，包括每个对象的 ObjectId。注意:我会在 created(){} Hook 期间调用它，以便在 DOM 挂载之前有时间处理 GET 请求。您可以通过 UI 中的 ObjectID 引用数组对象，如下所示:

<div v-for="item in apiData" :key='item_id' :item="item"> 
   <p> {{item.whateverProperty}} </p>
</div>