Vue.js 애플리케이션 내에서 로컬 버전의 데이터 개체를 사용하는 방법

Vue.js 애플리케이션 내에서 로컬 버전의 데이터 개체를 사용하는 방법

Vue.js 및 vuex를 사용하여 및 api를 통해 액세스하는 백엔드 스토어의 데이터로 작업하고 있습니다.제 질문은 의미론이나 실제로 어떻게 이 질문을 하고 더 나은 답을 찾을 것인가 하는 것입니다.왜냐하면 저는 검색해야 할 정확한 용어조차 모르기 때문입니다.자, 이제...

vue 코드 내에서 백엔드 api에 호출하면 UI에서 작업하려는 데이터 블록이 포함된 json blob이 반환됩니다.문제 없습니다.그 후 데이터를 약간 수정하여 사용자에게 제시해야 합니다.여기에는 몇 개의 필드를 평가하고 변경하는 것(예를 들어 값이 0인 경우 'n/a'에 넣는 것 등)이 수반되며, 몇 개의 필드에 대해 계산을 수행하는 것도 포함됩니다.그런 다음 그리드/테이블에서 사용자에게 제시합니다.사용자가 필드에서도 정렬 및 검색을 할 수 있으면 좋겠습니다.따라서 백엔드에서 fullName이라는 이름의 필드를 표시해도 실제로는 그리드에 없는 lastName이라는 이름의 필드에서 정렬할 수 있습니다.

여기서 질문하겠습니다.API에서 나오는 데이터 객체를 UI에 필요한 것으로 변환하기 위해 코드로 단일 '트랜스포머/리듀서'를 작성해야 합니까?아니면 HTML 템플릿에서 직접 필드를 수정하기 위해 여러 필터('|' 파이프와 함께 html에 직접 들어가는 Vue.js 필터)를 작성해야 합니까?API에서 돌아오는 오브젝트를 수정하면 어떤 업데이트를 게시/패치/복귀해야 하는 경우 - API가 원하는 오브젝트로 돌아가기 위해 '역방향' 변압기가 필요합니다.

일반적으로 제 질문은 '순도'를 유지하기 위해 api 응답 개체를 로컬로 처리하는 방법'으로 요약될 수 있습니다.아니면 그런 식으로요나는 분명히 정확한 용어를 찾고 있고 그것이 내가 이 주제에 대한 정보를 검색하기조차 힘든 이유이다.그 점 사과드리며 도움을 주시면 감사하겠습니다.

또한 이 문제는 모든 데이터 기반 UI 프레임워크에 적용될 수 있기 때문에 Vue 고유의 질문은 없습니다.

이제 、 하하하하하하같같하 。UI에서 사용할 수 있도록 하기 전에 응답을 수정해야 하는지 알고 싶을 뿐입니다.을 사용하다에서는 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 ID ui ui 。

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

언급URL : https://stackoverflow.com/questions/56545817/how-to-work-with-local-versions-of-data-objects-within-a-vue-js-application