Vuejs - 동일한 컴포넌트에서 다른 날짜 가져오기

Vuejs - 동일한 컴포넌트에서 다른 날짜 가져오기

몇 가지 컴포넌트(테이블, 선택 등)를 작성했는데 모두 동일한 방법으로 API 정보를 가져옵니다.

어플리케이션의 다른 페이지에서 이러한 컴포넌트를 사용하는 것이 목적이며, 따라서 이러한 컴포넌트가 수신하는 정보에 관계없이 동일한 컴포넌트(테이블 등)를 사용할 수 있도록 하기 위해 다양한 방법을 만들었습니다.

단, API를 요구하는 모든 컴포넌트에 이러한 메서드를 적용하려면 많은 코드를 반복해야 하므로 이러한 메서드를 글로벌하게 작성하는 것이 목표입니다.

검색 결과, 플러그 인, 믹스, Vuex의 3가지 방법을 찾았습니다.그러나 나는 이것을 하는 가장 이상적인 방법이 무엇인지 모르겠다.

제안해 주실 수 있나요?

Vuex를 선택해주세요.

컴포넌트가 데이터와 상호작용하는 중앙 집중형 스토어를 만듭니다.getters,actions그리고.mutations스토어는 API와 상호작용하는 방법을 알고 있습니다.

예를 들면,table컴포넌트는 바보가 될 수 있으며, 단지 예측만 하면 됩니다.:data=someData를 초기화하는 컴포넌트가table전달된 모든 것을 렌더링합니다.이것.someDataVuex에 매핑할 수 있습니다.getter(또는 스토어 상태의 항목에 직접) 부모 구성요소에 있습니다.

컴포넌트가 API에 무언가를 송신할 필요가 있는 경우, 부모가 적절한 것을 선택하여 호출하는 이벤트를 트리거할 수 있습니다.action또는mutation스토어에서는 API를 호출하여 이 액션을 수행할 수 있습니다.따라서 Vuex 스토어로 표현되는 if의 추상화만 해도 API가 어떻게 동작하는지는 부모도 완전히 알지 못합니다.

저는 지난주 여기의 다른 질문에 대해 매우 간단한 todos 어플리케이션을 만들었습니다. 자유롭게 보세요.Vue, Vuex를 사용하고 데이터를 Firebase에 저장합니다.또한 REST를 최대한 구현하지는 않지만 적절한 REST 방법을 사용하기 위해 스토어를 변경하는 것은 어렵지 않습니다.get,post,put,delete기타.

의 이 응용 프로그램의 모든 관련 코드App.vue그리고.store.js(1줄 입력)main.jsVue 인스턴스에 스토어를 추가합니다.

Vuex는 공유/소유 컴포넌트 상태를 지원합니다.공유 API를 관리하는 방법이 문제라면 Vuex persi에 직접 문의하지 않습니다.컴포넌트에서 데이터에 접근할 수 있게 되면 도움이 됩니다.

즉, 다음과 같이 API 호출을 수행하고 데이터를 가져오는 모듈을 만들 수 있습니다.

http.http.http.syslog

export const getUser = async id => {      
  const response = await fetch(`/user/${id}`)
  return await response.json()
}

export const getContent = async id => {      
  const response = await fetch(`/content/${id}`)
  return await response.json()
}

이 솔루션은 Vuex의 유무에 관계없이 모두 도움이 됩니다.이러한 메서드를 어디에서나 호출할 수 있습니다.

언급URL : https://stackoverflow.com/questions/50907079/vuejs-get-different-date-in-the-same-component