Vue.observable로 Vue의 상태를 관리하는 방법

불필요한 상용구를 버리십시오.

Unsplash에 Paul Skorupskas의 사진.

저는 Vue와 최소 3 년 동안 작업 해 왔으며 처음부터 Vuex를 사용하여 내 앱의 공통 상태를 제어했습니다. 공식적이고 핵심적인 지원 기능이기 때문입니다. 대규모 애플리케이션의 경우 Vuex와 같은 솔루션을 사용하여 전체 팀이 코드를 중앙 집중화하고 구성하며 이해할 수 있도록 유지하는 것이 합리적입니다. 그러나 더 작은 앱의 경우 소량의 데이터를 제어하기 위해 너무 많은 코드 (상태, 동작, 변형, 게터)를 작성해야하는 것처럼 보였습니다.

대체로 상태는 구성 요소간에 공유되는 객체 일뿐입니다. 따라서 상태 객체를 내보내는 JavaScript 파일로 솔루션 작성을 시작할 수 있습니다.

// store.js
const state = { counter: 1 };
export default state;

지금까지는 괜찮습니다. 그러나 이와 같은 방법을 사용하여 상점 값을 업데이트하려면 어떻게해야합니까?

,methods: {
    increment() {
      store.counter ++
    }
  }

이 문제를 해결하기 위해 우리는 pubsub내 기사 Write Your Own JavaScript State Management Library 에서 설명한 패턴 과 같은 것을 구현 하거나 RxJS 와 같은 일부 라이브러리의 도움을 받아 옵저버 블 을 사용할 수 있습니다. Observable은 문제를 해결하기위한 훨씬 더 현대적이고 간결한 방법처럼 보이지만 두 경우 모두 훨씬 더 많은 코드를 작성하거나 일부 외부 라이브러리를 사용해야하므로 작은 앱에 더 적합한 솔루션이 아닐 수 있습니다.

이미 Vue를 사용하여 UI를 관리하고 있으므로 Vue.observableAPI 기능을 사용하여 작은 상점을 반응 형으로 만들 수 있습니다. Vue의 문서에 설명 된대로 :

“Vue.observable은 객체를 반응 적으로 만듭니다. 내부적으로 Vue는 data함수가 반환하는 객체에 이것을 사용 합니다.

반환 된 객체는 렌더링 함수계산 된 속성 내에서 직접 사용할 수 있으며 변경되면 적절한 업데이트를 트리거합니다. 간단한 시나리오를위한 최소한의 교차 구성 요소 상태 저장소로도 사용할 수 있습니다. "

우리 사건에 딱 맞는 것 같습니다. 이제 우리 가게는 다음과 같이 보일 것입니다.

// store.js
import Vue from 'vue';
const state = Vue.observable({ counter : 1})
export default state;

이렇게하면 컴포넌트를 업데이트하여 임포트하고 UI와 스토어 상태 간의 상호 작용을위한 버튼을 추가 할 수 있습니다.

이제 우리는 작은 반응적이고 복잡하지 않은 저장소와 비즈니스 로직에서 분리 된 컴포넌트를 갖게되었습니다.

여기에 사용 된 코드는 CodeSandbox 에서 사용할 수 있으므로 직접 테스트 할 수 있습니다.

이 프로젝트에 코드가 너무 많고 지역 주만으로도 충분하다고 생각할 수 있으며 동의합니다. 이 예제는 앞서 말했듯이 부모가 아닌 관계간에 상태를 공유해야하고 상위 구성 요소를 사용하거나 여러 수준간에 소품 및 이벤트를 전달하고 싶지 않은 경우에 더 적합합니다. 이는 애플리케이션을 단순에서 너무 복잡하게 만들 수 있습니다.

마지막 참고 사항 :이 예제는 Vuex가 모든 프로젝트에서 Vuex를 대체하는 강력한 도구가 아닙니다. 강력한 기능이 필요한 대규모 프로젝트의 경우 Vuex 또는 기타 유사한 솔루션을 사용해야합니다.

이 기사가 마음에 드셨기를 바랍니다. 다음에서 뵙겠습니다.

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.