x스

Vuex
x스
원저자에반 위에
최초출시2016년 11월, 7년 전(2016-11)
안정적인 방출
4.0.2 / 2021년 6월 17일
저장소github.com/vuejs/vuex
작성자자바스크립트
플랫폼웹 플랫폼
전임자x스
크기508KB
유형국가관리도서관
면허증.MIT 라이선스
웹사이트vuex.vuejs.org

Vuex는 Vue.js 애플리케이션을 위한 오픈 소스 상태 관리 라이브러리입니다. Vue.js의 개발자인 Evan You가 Vue.js 애플리케이션에서 상태 관리를 위한 중앙 집중식 스토어를 제공하기 위해 만들었습니다.

개요

Vuex는 애플리케이션의 상태를 관리하기 위한 일반적인 패턴인 Flux 아키텍처를 기반으로 합니다. 플럭스 자체는 저장, 동작, 뷰, 돌연변이의 네 가지 구성 요소로 구성됩니다.[1]

Vuex는 단방향 데이터 흐름 패턴을 따르므로 애플리케이션 전체에서 데이터가 한 방향으로 흐릅니다. 이를 통해 애플리케이션 아키텍처가 단순화되어 이해 및 유지[2] 관리가 더욱 용이해집니다.

Vuex에서 응용 프로그램 상태는 자바스크립트 객체인 단일 저장소에 저장됩니다. 응용 프로그램의 각 구성 요소는 스토어에 액세스하여 상태를 업데이트할 수 있는 반면, 스토어 자체는 돌연변이를 일으켜서만 수정할 수 있습니다. 돌연변이는 상점의 상태를 변경할 수 있는 함수이며 본질적으로 항상 동기적이어야 합니다.[3]

동작은 돌연변이를 발생시킬 뿐만 아니라 API 호출을 포함한 다른 작업을 수행하는 비동기 함수입니다. 복잡한 논리를 처리하는 데 사용되며 구성 요소 또는 기타 작업에서 호출할 수 있습니다.[4]

반면 게터는 구성 요소가 상점의 상태를 수정하지 않고도 액세스하고 조작할 수 있는 기능입니다. 상태에서 값을 도출하거나 데이터를 필터링하는 데 사용할 수 있습니다.[5]

역사

Vuex의 역사는 Evan You에 의해 개발된 진보적인 자바스크립트 프레임워크인 Vue.js를 만드는 것으로 시작됩니다. Vue.js는 2014년 2월에 처음 출시되었습니다. 단순함과 성능으로 인해 빠르게 인기를 얻었습니다.

Vue.js 애플리케이션이 복잡해짐에 따라 효과적인 상태 관리가 필요하게 되었습니다. 개발자들은 Vue.js 애플리케이션에서 구성 요소의 상태를 관리하고 동기화할 수 있는 솔루션을 원했습니다.

Vue.js의 창시자인 Evan You는 이러한 필요성을 인식하고 Vue.js와 원활하게 통합될 수 있는 전용 상태 관리 라이브러리를 구축하기로 결정했습니다. 이 도서관은 나중에 x스라고 알려지게 되었습니다.

ue스는 2015년 3월에 공식적으로 선보였습니다. 목표는 Vue.js 애플리케이션에서 애플리케이션 상태를 관리하는 중앙 집중식이고 예측 가능한 방법을 제공하는 것이었습니다.[6]

특징들

중앙집중식국가관리

Vuex를 사용하면 애플리케이션의 상태를 중앙 집중식으로 관리할 수 있으므로 이론적으로 유지 및 업데이트가 더 쉬워집니다.[7]

예측 가능한 상태 변화

돌연변이는 동기적이고 동작은 본질적으로 비동기적이므로 애플리케이션의 상태 변경을 예측할 수 있고 디버그하기가 더 쉽습니다.[8]

성과에 초점을 맞춥니다.

Vuex는 애플리케이션에서 중복되는 코드의 양을 줄여 성능을 향상시킬 수 있습니다.[5]

구성 요소 간의 단순한 통신

각 구성품은 동일한 매장에 접근할 수 있기 때문에 상호 간의 커뮤니케이션도 간소화됩니다.[9]

미래.

향후 개발에 있어서 뷰렉스팀은 도서관 개선 작업을 진행해 왔으며 최근 뷰렉스4를 출시했습니다. 이 버전은 향상된 TypeScript 지원, 향상된 디버깅 도구 및 향상된 성능을 제공합니다. 이 팀은 또한 서버측 렌더링에 대한 지원을 추가하고 새로운 구성 API를 도입하는 작업을 진행해 왔으며, 이를 통해 향후 Vue.js와 함께 Vuex를 보다 쉽게 사용할 수 있을 것으로 알려졌습니다.[10][timeframe?]

Pinia는 Vue.js 애플리케이션을 위한 또 다른 상태 관리 라이브러리로, Vuex의 미래에 의문을 제기했습니다. 2019년에 출시된 뷰렉스와 마찬가지로 애플리케이션의 상태를 관리하기 위한 중앙 집중형 스토어를 제공합니다. 그러나 이것은 ue스와 몇 가지 점에서 다릅니다. 첫째, Pinia는 좀 더 현대적인 API를 사용하며 Vue.js 3에서 Composition API의 기능을 활용할 수 있습니다. 또한 Vuex보다 더 작고 간단하기 때문에 특히 Vue.js의 상태 관리를 처음 접하는 개발자들에게 더 쉽게 이해하고 사용할 수 있습니다. 이러한 장점으로 인해 Pinia는 Vue.js 커뮤니티에서 상당한 인기를 얻고 있으며, Vue.js 프로젝트에서 선호하는 주 관리 라이브러리로 여러 면에서 Vuex를 대체했습니다. 그럼에도 불구하고, Vuex는 여전히 대규모 사용자 기반의 이점을 누리고 있으며 기존 Vue.js 애플리케이션에서 널리 사용되고 있습니다.[11]

참고 항목

참고문헌

  1. ^ Tientcheu, Dylan (2020-12-24). "Do you really need Vuex?". LogRocket Blog. Retrieved 2023-03-31.
  2. ^ "Understanding Unidirectional Data Flow - Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video]". www.oreilly.com. Retrieved 2023-03-27.
  3. ^ "Getting Started with Storing Vue Data in Vuex". Fjolt. Retrieved 2023-03-31.
  4. ^ "How to query your API using Vuex in your Vue application". DEV Community. Retrieved 2023-03-31.
  5. ^ a b "When To Use Vuex Getters In a Vue.js Project". www.drewtown.dev. Retrieved 2023-03-31.
  6. ^ "Between the Wires interview with Evan You - Between the Wires". 2017-06-03. Archived from the original on 2017-06-03. Retrieved 2023-03-27.
  7. ^ "Vuex: State Management Simplified in Vue.js". www.codemag.com. Retrieved 2023-03-31.
  8. ^ "Reactive And Simple State Management With Vuex". GeekyAnts Tech Blog. Retrieved 2023-03-31.
  9. ^ Ago, Alfarisi94in #utopian-Io • 5 Years (2017-12-27). "How Communicating Between Components With Vuex , State Management From Vue". Steemit. Retrieved 2023-03-31.{{cite web}}: CS1 main: 숫자 이름: 저자 목록 (링크)
  10. ^ "What's Coming To VueX?". Smashing Magazine. 2020-12-24. Retrieved 2023-03-31.
  11. ^ Kotov, Oleksandr (2023-01-11). "Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? - SPG Blog - Web Applications Development". Software Planet Group. Retrieved 2023-03-27.

외부 링크