Vuex 사용 시기 및 방법

당신은 이 문장에서 무엇을 얻을 수 있습니까?

본고는 고급스럽고 대형이며 복잡한 Vue에서 사용하는 유행하는 상점 Vuex를 소개하고자 합니다.js 사이트와 웹 응용 프로그램 (웹 응용 프로그램).이것은 결코 완전하고 절대적인 지침이 아니다.프로젝트에 Vuex를 추가하는 것을 언제 고려해야 하는지, 왜 이런 상황에서 Vuex를 사용해야 하는지, 그리고 마지막으로 처음으로 Vuex를 사용하는 방법을 알려줄 뿐이다.
이 문서에는 Vuex가 필요하지 않을 수도 있는 간단한 예가 사용됩니다.그러나 이 예들은 단지 개념을 이해하는 데 도움을 주기 위해서일 뿐이니 이 점을 기억해 주십시오.

Vuex란?

대부분의 JavaScript 프레임워크에는 이러한 스토리지가 있습니다.너는 아마 이 단어를 여러 번 만날 것이다.이 단어는 도대체 무슨 뜻입니까?스토리지입니까?전자상거래와 관련된 것?
완전히 그렇지는 않아요.🤷‍♂️
상점은 당신이 선택한 자바스크립트 프레임워크에서 고급 응용 프로그램과 사이트를 만드는 관건이라고 할 수 있습니다.베일이든js, React, Ember 또는 Angular.현재, 이것은 상점을 사용해야만 고급 웹 응용 프로그램을 만들 수 있다는 것을 의미하지는 않는다. 아니, 특정한 프레임워크가 제공하는 간단한 내장 기능을 사용해도 아주 고급 웹 사이트를 만들 수 있다.그러나 선진적이고 방대한 사이트/인터넷 애플리케이션의 혼란 속에서 상점은 당신에게 더 많은 통제권을 가져다 준다.상점을 이용하면 어떤 일, 즉 상태를 조직할 수 있다.
사이트나 웹 응용 프로그램의 상태는 사용자와의 상호작용을 강화하는 데 필수적이다.도구를 사용하여 일부 데이터를 하위 구성 요소에 보내고 사용자 정의 이벤트를 사용하여 일부 데이터를 부모 구성 요소로 보냅니다. (사용 this.$emit)예를 들어, 서브어셈블리 목록의 모든 항목을 알리기 위해 도구를 전달하고 모 어셈블리의 항목이 삭제되었음을 알리는 이벤트를 보냅니다. 이것이 바로 이 목록을 관리하는 상태입니다.
따라서 우리 사이트의 상태를 추적하고 관리하는 것은 매우 중요하다.Vuex가 우리를 위해 이 일을 한다.

왜 Vuex를 사용합니까?

Vue는 특정 스토리지만 사용하는 것이 아닙니다.우리가 사용할 수 있는 많은 상점들이 있다.Redux가 있는데 이것은 매우 인기 있는 상태 관리 라이브러리입니다. 왜냐하면 거의 모든 React를 사용하는 사람들이 그것을 사용하기 때문입니다.하지만 레드룩스와 블루의 다른 상점을 이용할 수 있어도 블루룩스를 사용하는 것이 좋다.
왜냐하면 Vuex는 Redux와 마찬가지로 Flux의 계발을 받아 Vue가 제공하는 기존 기능을 활용하기 위해 구축된 것이다.우선, Redux의 상태는 변할 수 없고 변경할 때 완전히 교체되지만 Vuex는 매우 구체적인 방식으로 상태를 바꾸는 것을 제공한다.
Vuex의 강점은 구성 요소가 Vuex 저장소에서 상태를 얻을 수 있고 저장소의 상태가 변할 때 반응적이고 효율적인 업데이트를 할 수 있다는 것이다.
Vue 프로젝트에 대한 상태 관리 도구를 선택할 때 Vuex는 이렇게 많은 기능을 제공합니다. 이것은 아마도 당신의 첫 번째 선택일 것입니다.

Vuex를 사용하는 정확한 시간은 언제입니까?

Vuex는 강력하고 효율이 높아서 우리를 위해 많은 일을 처리한다.그래서 우리는 그것을 더욱 많이 이용해야 한다. 그렇지?틀렸어!

Just because a feature/tool/library offers a lot of advantages doesn't mean it's supposed to be used all the time.

VueRouter가 좋은 예입니다.비록 그것이 매우 유용한 기능들로 가득 찼지만, 너는 아마도 모든 사이트에서 사용하지 않을 것이다.일부 사이트는 공유기를 필요로 하지 않는다.페이지의 경로를 처리하기 위해 Express와 같은 백엔드가 있거나, 동적 구성 요소를 사용하는 단일 페이지 프로그램 (SPA) 이 있을 수도 있습니다.마찬가지로 모든 사이트나 웹 응용 프로그램이 Vuex를 사용할 이유가 있는 것은 아니다.
간단하게 말하면 스마트폰을 한 대 산 것 같지만 전화를 하고 받을 물건을 원할 뿐이다.이 휴대전화는 좋은 카메라와 256GB의 저장 공간, 램이 있어 고급 게임을 할 수 있다.하지만 전화만 하고 싶다면, 정말 이 모든 것이 필요합니까?
우리의 Vue 프로젝트와 Vuex도 마찬가지다.Vuex가 제공하는 것은 반드시 필요한 것이어야 한다. 그렇지 않으면 사이트의 부담이 될 것이지 유용한 것이 아니다.어떤 경우에는 기본적인 Vue 기능을 사용할 수 있고, 때로는 정말 Vuex의 강력한 기능을 사용해야 한다.그럼 언제 Vuex 사용을 고려해야 하나요?
Vuex의 핵심은 애플리케이션의 모든 상태를 중앙에 저장하는 스토리지입니다.일반적으로, 우리는 도구와 맞춤형 이벤트를 사용하여 상태를 추적한다.우리 사이트에 상태를 바꿀 수 있는 구성 요소가 몇 개만 있으면 된다.만약 당신의 프로젝트가 더 크고 복잡해진다면 무슨 일이 일어날까요?
더 많은 구성 요소가 있을 것입니다.아이템이 더 많은 구성 요소에 전달되어 대량의 맞춤형 이벤트가 시작됩니다.누가 이런 상태를 바꿨는지, 원래는 다른 것이어야 하는데, 어떤 성분들이 그것을 바꿨다.기다리다그 구성 요소는 어떻게 접근합니까, 어느 구성 요소입니까?!!
봐라, 혼란스러워!웹 사이트에 더 많은 구성 요소와 복잡성이 증가할 때, 당신은 어떻게 상태를 바꿀 것인가를 조직해야 한다.이것은 이상적인 상황으로, 집중된 Vuex 상점이 도움을 제공할 것이다.소형 또는 간단한 애플리케이션/웹 사이트에 사용되는 Vuex는 스마트폰의 예와 같이 과도한 사용이다.프로젝트가 복잡하고 관리 도움이 필요할 때만 사용할 수 있습니다.

Vuex 시작 방법

나는 Vuex를 어떻게 사용하는지 깊이 토론하지 않을 것이다.다음은 Vuex 사용에 대한 몇 가지 기본 개념입니다.이 섹션에서는 Vuex 스토리지에서 상태를 변경하고 읽어들이는 간단한 예제를 제공합니다.
첫 번째 단계는 Vuex를 설치하는 것입니다.

npm install vuex

모든 Vuex 로직은 별도의 파일에 저장하는 것이 좋습니다.우리는 논리를 store.js라는 파일에 저장할 것이다.물론, 너는 마음대로 명명할 수 있다.이 파일에 store 대상을 놓고 가져올 것입니다. main.js 전역 Vue 실례에 등록할 것입니다.

store.js 파일에는 Vuex 스토리지라는 스토리지 객체가 있습니다.우리는 저장소에 데이터를 저장해야 한다. 그리고 이 데이터는 다른 구성 요소에 의해 변이하거나 변경되고 검색될 것이다.우리는 미리 정의된 키워드 state 를 사용하여 우리 상점에 데이터를 추가할 수 있습니다.일반 Vue 인스턴스data()처럼 사용할 수 있습니다.우리 상점에서, 우리는 이미 계수기 데이터 속성을 가지고 있다.현재 우리는 구성 요소에서 그것을 검색해야 한다.App.vue 구성 요소에서 계수기를 검색합니다.우리는 명령this.$store.state.counter을 사용하여 이 점을 실현할 수 있다.$store 키워드가 있습니다. 왜냐하면 우리는 main.js 파일에 Vuex 상점을 등록했기 때문입니다.

현재 데이터를 검색할 때 대량으로 사용해야 하는 개념이 하나 더 있다.어떤 경우, 데이터를 사용하기 전에 데이터를 처리하거나 수학 연산을 실행해야 할 수도 있습니다.만약 이 작업이 서로 다른 구성 요소에 대해 다르다면, 각각의 구성 요소를 위한 선택의 여지가 없을 것이다.그러나 모든 구성 요소의 동작이 같으면 사용할 수 있다getters.Getter를 사용하면 데이터를 실행한 다음 최종 결과를 검색할 수 있습니다.하나의 Getter는 하나의 함수처럼 느껴진다.하지만 상황은 다르다.Getter에state 대상이 필요하기 때문입니다.Vuex는 자동으로 Getter에 전달됩니다.우리는 counter 데이터 속성을 사용하여 단추가 클릭된 횟수를 추적하고 그것을 검색합니다.그럼 그것들을 표시하기 전에 클릭 횟수를 배로 늘리는 게 어때요?우리는 이 효과에 도달하기 위해 흡기제를 사용할 수 있다.

우리는 우리의 Getter를 창조했다.App.vue 구성 요소에서 그것을 사용합니다.Getter를 사용해야 하기 때문에 사용할 수 없다는 것을 기억하십시오. this.$store.stateGetter에 대해서는 this.$store.getters를 사용합니다.

Getter의 이름만 사용하는 것을 기억하십시오.우리의 예시에서 이것은 doubleClicks이 아니라 doubleClicks()를 사용한다는 것을 의미한다.일반 함수처럼 보일지라도 그것을 실행할 필요가 없기 때문이다.이벤트 탐지기에 리셋 함수를 추가할 때로 볼 수 있습니다.자동으로 리셋을 호출하는 것처럼 Getter는 Vuex에서 자동으로 호출되고 실행됩니다.
마지막으로 우리는 볼 것이다mutations.데이터 속성의 상태를 변경할 때, 이 변경 사항을 제출하기만 하면 됩니다.데이터 속성에 대한 변경 사항은 코드에 지정됩니다.그리고 모든 구성 요소에서 상태를 변경할 수 있으며 같은 방식으로 업데이트할 수 있습니다.
우리는 수동 증가 counter 데이터 속성을 통해 그것을 변경합니다.우리가 그것을 위해 돌변을 창조합시다.mutationsstate 대상에 접근해야만 변이를 할 수 있다.

돌연변이를 사용한다고 하면 상황이 좀 달라진다.Getter와state와 달리 this.$store.mutations처럼 돌연변이에 접근할 수 없습니다.앞에서 언급한 바와 같이, 우리는 돌연변이를 제출했고, 괄호에 돌연변이의 이름을 지정했다.

여기서 우리는 Vuex 집행명increment의 돌연변이를 알려주거나 다시 말하면 집행명increment의 돌연변이를 알려준다.
Vuex는 매우 간단한 예입니다.하지만 저는 당신이 Vuex를 사용하는 몇 가지 기본 개념을 이해할 수 있기를 바랍니다.
이를 통해 이 상태 관리 도구의 고급 용도를 탐색하기 위해 필요한 개념을 이해할 수 있습니다.이제 프로젝트에 Vuex가 필요한지 여부와 사용 방법을 결정할 수 있습니다.