Как работать с локальными версиями объектов данных в приложении Vue.js?

Question

Я использую Vue.js и vuex для работы с данными из внутреннего хранилища, к которому я обращаюсь через и api. Мой вопрос может быть больше о семантике и о том, как на самом деле задать этот вопрос и найти лучшие ответы, потому что я даже не знаю правильных терминов для поиска. Так что вот так ...

В моем коде vue я вызываю API своего внутреннего интерфейса, и он возвращает блоб json с блоком данных, с которым я хочу работать в пользовательском интерфейсе. Там нет проблем. Но тогда мне нужно немного изменить эти данные, чтобы представить их пользователю. это влечет за собой оценку нескольких полей и их изменение (скажем, если значение равно 0, введите 'n / a' и т. д.), возможно, выполнить некоторые математические расчеты для нескольких полей и так далее. Тогда я представляю это пользователю в сетке / таблице. Я хочу, чтобы пользователь также мог сортировать и искать по полям. Поэтому я могу отобразить поле с именем fullName, которое поступает из внутреннего интерфейса, но позволяет пользователю сортировать по полю с именем lastName, которого на самом деле нет в сетке.

С учетом сказанного, вот мой вопрос - должен ли я создавать один «преобразователь / редуктор» в коде для преобразования объекта данных, поступающего из API, в то, что мне нужно для пользовательского интерфейса? Или я должен написать несколько фильтров (под этим я подразумеваю фильтры Vue.js, которые идут прямо в html с каналом '|'), чтобы просто изменить поля непосредственно в html-шаблоне? Меня беспокоит, когда я изменяю объект, возвращающийся из API, что, если мне нужно опубликовать / исправить / вернуть какое-то обновление - тогда мне нужен «обратный» преобразователь, чтобы вернуться к объекту, который хочет увидеть мой API. .

В общем, я полагаю, что мой вопрос можно свести к следующему: «Как мне локально обработать объект ответа API, чтобы я мог поддерживать его« чистоту »?» Или что-то вдоль этих линий. Я, очевидно, пытаюсь найти правильные термины, и именно поэтому я изо всех сил пытаюсь даже найти информацию по этой теме в Google. За это я прошу прощения, и любая помощь будет оценена.

Кроме того, я понимаю, что в моем вопросе нет ничего специфичного для Vue, поскольку эта проблема может относиться к любой управляемой данными среде пользовательского интерфейса.

Answer 1

Я думаю, я понимаю, что вы спрашиваете сейчас.Вы просто хотите узнать, нужно ли изменить ответ, прежде чем сделать его потребляемым для пользовательского интерфейса.Допустим, вы используете 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(){}, чтобы дать время для обработки запроса GET до монтирования DOM. Вы можете ссылаться на объекты массива по ObjectID в пользовательском интерфейсе, например:

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