>

서버 전송 이벤트를 설정하는 방법에 대한 조언을 도와 줄 수 있습니까?

저는 auctionedItems 가있는 작은 입찰 앱을 만들었습니다.  다음 구성 요소에 나타납니다.

<div v-for="item in auctionedItems">
  <Item :info="item"></Item>
</div>

와이즈 비즈  배열은 서버 (Express.js)에서 제공됩니다.  응답. 각 auctionedItems get 를 포함 가치.

누군가가 그 항목 중 하나에 입찰한다고 가정하자 => auctionedItem maximumBid 의 서버에서 변경되어 사용자에게 브로드 캐스트됩니다.

Vue와 Express에서 어떻게 설정합니까?

maximumBid
  • 답변 # 1

    앱 전체에서 상태를 유지하려고하며 각 서버 이벤트가 여러 구성 요소에 영향을 줄 수 있습니다. Vue의 상태 관리자 인 Vuex를 사용하십시오 (예 : Redux for React).

    앱은 auctionedItems 를 저장합니다  Vuex (바람직하게는 "모듈"안에 있음)에서 구성 요소는 해당 구성 요소에있는 것처럼 Vuex 상태를 계산 된 속성으로 사용합니다. 귀하의 주에 영향을 미칩니다.

    돌연변이의 예는 다음과 같습니다. 와이즈 비즈

    서버가 업데이트 된 항목으로 해당 이벤트를 클라이언트에 푸시 할 때마다 vuex updateItem(state, newItem) 를 호출합니다. Vuex 상태를 업데이트 한 다음 Vue 앱 전체에 전파되어 해당 상태를 사용하는 모든 구성 요소에 영향을줍니다.

    클라이언트 대 서버는 귀하의 책임입니다. Express를 폴링하거나 WebSocket을 사용하여 푸시 할 수 있습니다. 이 답변은 Vue 클라이언트가 해당 "서버 전송 이벤트"를 처리하기위한 것입니다.

    store.commit('updateItem', itemFromServer)

  • 이전 java - 첫 번째 인스턴스화에서 여전히 정적 블록을 실행할 때 클래스 인스턴스화
  • 다음 dataframe - 아르 자형 - 다른 열을 기준으로 세 가지 최고 값 찾기