Question

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

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

话虽如此，这是我的问题-我是否应该在代码中创建一个“转换器/归约器”以将来自api的数据对象转换为我需要的ui？还是我应该编写多个过滤器（这就是说，Vue.js过滤器直接通过'|'管道在html中使用）以直接在html模板中修改字段？我担心的是，一旦我修改了从api返回的对象，如果我必须发布/修补/放回某种更新，那我需要一个“反向”转换器才能返回到我的api想看到的对象

一般而言，我想我的问题可以归结为“我如何在本地处理api响应对象，以便保持其“纯度”？” 或类似的规定。我显然在为正确的术语弄糊涂，这就是为什么我甚至都在google上搜索有关此主题的信息的原因。为此，我深表歉意，我们将不胜感激。

此外，我意识到我的问题没有针对Vue的问题，因为该问题可能适用于任何数据驱动的ui框架。

Answer 1

我想我现在明白你的要求。您只想知道是否需要修改响应，然后才能使其由UI使用。假设您正在使用axios。我在Vue中要做的是使用response.data对象作为要注入到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(){}钩子期间调用此函数，以留出时间在DOM安装之前处理GET请求。您可以在UI中通过ObjectID引用数组对象，如下所示：

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

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

1 个答案: