Vuex 빠른 시작 - vuex란 무엇입니까?
자세한 내용은 Vuex 공식 문서를 참조하십시오.
창작 배경
2023년에는 물론 몇 가지 새로운 기술을 배우고, Vue 학습을 바탕으로 깊이 있게 배워야 합니다.Vue의 상태 관리 모드 - vuex. 이 기사의 주요 연구vuex의 기초와 프로젝트에서 vuex를 구성하고 설치하는 방법。
vuex에 대한 기본 지식
1. 뷰엑스란?
공식 웹 사이트에 따르면 Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴 + 라이브러리입니다. 중앙 집중식 스토리지를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.
둘, vuex의 구성
Vuex는 다섯 부분으로 구성되어 있습니다.상태、돌연변이、행동、기준 치수、얻는 사람。
| 속성 | 설명하다 |
|---|---|
| 상태 | 공유 상태(예: 변수) |
| 돌연변이 | vuex 스토어에서 상태를 변경하는 유일한 방법은 변형을 제출하여 상태(변수 값)를 수정하는 것입니다. |
| 행동 | 변형과 유사하게 저장소의 상태를 수정합니다. 다만 상태는 뮤테이션을 제출해야만 수정이 가능하기 때문에 Action도 뮤테이션을 제출하여 스토어의 상태를 수정할 수 있다고 했는데, Mutataion과 달리 Action은 비동기 작업을 지원합니다. |
| 기준 치수 | 모듈은 대규모 프로젝트에서 상태 관리 및 공동 개발을 용이하게 하기 위해 저장소를 여러 하위 모듈(모듈)로 분할하고 각 하위 모듈에는 완전한 상태, 돌연변이, 작업 및 게터가 있습니다. (여기서는 소개하지 않음) |
| 얻는 사람 | 구성 요소에서 계산된 속성으로 이해할 수 있는 상태 기반 파생 상태 |
3. 왜 vuex를 사용합니까?
단방향 데이터 흐름의 간접 지정은 응용 프로그램이 상태를 공유하는 여러 구성 요소를 만나면 쉽게 깨집니다.
- 1.여러 보기가 동일한 상태에 종속됨
- 2.다른 보기의 작업은 동일한 상태를 변경해야 합니다.
문제 1의 경우 매개 변수를 전달하는 방법은 다중 계층 중첩 구성 요소에 대해 매우 번거로울 것이며 형제 구성 요소 간의 상태 전송에 대해 아무 것도 할 수 없습니다.
두 번째 문제의 경우 부모-자식 구성 요소를 사용하여 이벤트를 직접 참조하거나 사용하여 상태의 여러 복사본을 변경하고 동기화합니다. 위의 이러한 패턴은 매우 깨지기 쉽고 종종 유지 관리할 수 없는 코드로 이어집니다.
실제로 vuex는 다음과 같이 간단히 이해할 수 있습니다.반응성 전역 변수, 그 기능도 C언어, C++, 자바의 전역변수(정적변수)와 유사하다 .
4. 언제 vuex를 사용하나요?
Vuex는 공유 상태를 관리하는 데 도움이 될 수 있으며 단기 및 장기 이점을 평가해야 하는 더 많은 개념과 프레임워크를 제공합니다.
- 대규모 단일 페이지 애플리케이션을 개발할 계획이 없다면 vuex를 사용하는 것이 번거롭고 중복될 수 있습니다.
- 필요한 경우중대형 단일 페이지 애플리케이션, 우리는 구성 요소 외부의 상태를 더 잘 관리할 수 있으며 vuex가 최선의 선택이 될 것입니다.
vuex 설치 및 구성
1. 직접 다운로드 / CDN 참조
- https://unpkg.com/vuex@4
위 링크는 항상 npm에서 릴리스된 최신 버전을 가리킵니다.- https://unpkg.com/
위 링크는 npm 기반의 CDN 링크를 제공합니다.- https://unpkg.com/[email protected]/dist/vuex.global.js
위 링크에서 특정 버전을 다운로드할 수 있습니다.
vue가 자동으로 설치된 후 vuex를 소개합니다.
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
그러나 여전히 npm으로 설치하는 것이 좋습니다.
둘, npm install vuex
npm 설치 사용 전제: node.js
설치 링크 설치: https://nodejs.org/en/
1.최신 버전의 node.js 다운로드
- 상자에서 node.js 버전을 다운로드하고 설치를 완료합니다. (반도 안되시면 인터넷에서 구체적인 설치 과정을 찾아보시면 됩니다)
둘,node.js 구성
- 첫 번째 단계는 win+r로 명령 창을 열고 cmd를 입력하는 것입니다.
- 2단계는 다음 명령어를 입력하는 것으로
node -v입력 후 node의 버전 번호가 표시되며
npm -v입력 후 해당 npm의 버전 번호가 표시되며
아래와 같은 그림이 표시되면 node.js 구성이 완료된 것입니다. 성공하고 다음 단계로 진행할 수 있습니다.
터미널 cd에 프로젝트가 있는 파일을 입력한 후 다음 코드를 입력하여 vuex를 설치합니다.
npm install vuex@next --save
다음과 같은 내용이 출력되면 정상적으로 설치가 된 것이므로
해당 프로젝트의 package.json 파일을 열어줍니다 .
vuex와 버전 번호가 종속성으로 표시되면 vuex가 프로젝트에 완벽하게 설치된 것입니다.
세, 원사 설치
얀 설치 사용 전제: 얀
설치 링크 설치: https://www.yarnpkg.cn/
설치 단계는 여기서 자세히 설명하지 않습니다.
프로젝트가 있는 파일을 터미널 cd에 입력하고 다음을 입력합니다.
yarn add vuex@next --save
설치 성공 여부를 확인하려면 npm 설치 확인 방법을 참조하고 package.json 파일에서 vuex 및 해당 버전 번호를 찾을 수 있습니다.
4. 직접 구축
dev 분기에서 최신 버전을 사용해야 하는 경우 GitHub에서 직접 코드를 복제하고 직접 빌드할 수 있습니다.
git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
yarn
yarn build