개요

Vuex는 라이브러리입니다. 상점 데이터 뷰엑스 스토어, Vue 애플리케이션의 상태에 대한 데이터 소스 역할을 합니다. 이 상점에는 세계 국가 (속성 집합) 및 기능 (게터, 행위 과 변이) 상태를 읽고 변경하는 데 사용됩니다.

변수에서 값을 추가하거나 제거할 수 있는 간단한 Vue 응용 프로그램을 만들고 싶은 시나리오를 고려하십시오. count, 아래 이미지와 같이:

일반적인 프로세스는 다음과 같습니다. 먼저, count 변하기 쉬운:

data() { return { count: 0 }
}

그런 다음 증가 및 감소 함수를 정의하여 조작할 수 있습니다. count:

methods: { increment() { this.count++; }, decrement() { this.count--; }
}

이 패턴에는 문제가 없지만(적어도 간단한 응용 프로그램에서는) 다른 구성 요소 간에 데이터를 반응적으로 공유하려고 할 때 문제가 발생합니다.

당신은 구성 요소를 사용하도록 선택할 수 있습니다 props, 그러나 50-100개(또는 그 이상)의 구성 요소로 작업하는 현실적인 경우를 고려하면 props를 사용하는 것은 상당히 빨리 지루해집니다.

구성 요소 간의 데이터 공유는 수십 개의 구성 요소가 있는 응용 프로그램과 같은 대규모 응용 프로그램을 개발할 때 더 복잡해집니다. 이것이 다음과 같은 솔루션이 뷰엑스 상태 관리를 덜 고통스럽게 만들기 위해 만들어졌습니다.

이 가이드에서는 Vue.js의 공식 상태 관리 라이브러리를 시작하기 위해 알아야 할 모든 것을 다룰 것입니다. 뷰엑스.

Vuex 시작하기

Vuex는 Facebook과 같은 프로젝트에서 영감을 받았습니다. 유량 및 React의 상태 관리 라이브러리, 돌아 오는, 성능과 유지 보수성을 보장하면서 Vue 앱 전체에서 반응 데이터를 가능한 한 간단하게 저장하고 교환할 수 있습니다.

이것은 중앙 매장 데이터를 가져오고 데이터를 쓰는 것입니다. 이를 얻거나 변경할 수 있는 다른 방법은 없습니다. 여러 구성 요소에서 일관되고 안정적으로 유지되도록 합니다. 이렇게 하면 여러 반응성 구성 요소가 서로 통신할 때 종종 발생할 수 있는 불안정성이 제거됩니다.

문서에 따르면:

“Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리입니다. 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙과 함께 애플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 합니다.”

이것은 기록된 상태에서 작동하는 세 가지 유형의 방법을 통해 달성됩니다. 게터는 저장소에서 데이터를 가져오는 데 사용되며, 작업은 데이터를 비동기적으로 가져오고 처리하고 돌연변이를 호출하는 데 사용되며 돌연변이는 저장소의 소스 데이터를 변경하는 데 사용됩니다. 어떤 의미에서 다음과 같은 주기를 상상할 수 있습니다.

중앙 집중식 전역 상태(또는 그 속성)는 getters를 통해 사용자에게 표시됩니다. -> 응용 프로그램이 작업을 호출합니다. -> 작업이 전역 상태에서 변형을 호출합니다. -> getter를 사용하여 새 상태를 검색하고 사용자에게 표시합니다.

이러한 요소를 통해 안정적이고 유지 가능한 상태 관리를 수행할 수 있습니다.

뷰엑스 설치

Vuex를 설치하는 방법에는 여러 가지가 있습니다. 대부분은 vue 앱을 만든 방법에 따라 다릅니다.

프로젝트에서 다음과 같은 다운로드 도구가 아닌 Vue CDN을 사용하는 경우 vue-cli or vite, 다운로드하고 싶을 것입니다 Vuex 소스 파일 애플리케이션 마크업에 포함합니다.

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

당신이 사용하는 경우 뷰클리, 다음과 같은 공식 Vue 패키지를 직접 포함할 수 있습니다. vue-router 과 vuex 설치 과정에서.

먼저 새 Vue 프로젝트를 만들고 싶을 것입니다.

$ vue create project-name

이것을 실행하면 다음과 같은 출력이 나와야 합니다.

여기에서 키보드를 사용하여 수동으로 기능 선택 옵션을 사용하여 Vuex를 포함하여 앱에 필요한 모든 패키지를 추가합니다.

또는 다음을 사용하여 생성된 기존 프로젝트가 있는 경우 vue-cli 또는 Vuex에 대한 사전 지원이 없는 Vite는 다음을 사용하여 설치할 수 있습니다. npm or yarn:

$ npm install vuex --save
# Or yarn
$ yarn add vuex

뷰엑스 구성

Vuex를 패키지로 설치한 경우 yarn or npm, Vue에서 플러그인으로 사용하도록 명시적으로 지시해야 합니다.

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) new Vue({...})

Vuex를 통한 중앙 집중식 상태 관리

　 스토어 Vuex 애플리케이션에서 모든 작업의 ​​중심입니다. 이는 전체 애플리케이션의 상태와 이 상태 세트에서 읽고 쓰는 데 필요한 기능을 보유하는 반응형 컨테이너입니다. 또한 스토어에 정의된 데이터나 메소드는 보편적인, 즉 vue 앱의 어디에서나 액세스할 수 있습니다.

가져온 것을 사용하여 초기화하여 새 Vuex 스토어를 쉽게 만들 수 있습니다. Vuex:

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {}
});

비어 있는 동안 저장소에는 비어 있는 상태, 돌연변이, 작업 및 게터 모음만 있습니다. 전역을 통해 이 스토어 인스턴스에 액세스할 수 있습니다. this.$store 사례! 하지만 액세스하기 전에 Vue 인스턴스에 등록하고 싶습니다.

new Vue({ el: '#app', store: store,
})

이제 상점에 유용하게 사용할 상태와 함수를 채울 수 있습니다!

뷰엑스 상태

Vuex를 고려하십시오 상태 와 동등하다 data Vue 인스턴스에서. 그러나 달리 data, 상태에 저장하는 모든 것은 전역적입니다. 즉, 단일 구성 요소에 제한되지 않고 애플리케이션의 어느 곳에서나 액세스하거나 수정할 수 있습니다.

속성을 추가하기만 하면 상태에 항목을 추가할 수 있습니다. state 상점 인스턴스의 필드:

const store = new Vuex.Store({ state: { name: "John Doe", age: 12, details: { city: "San Fransisco", country: "USA", }, },
});

여기에서 상태를 정의했습니다. username, age및 details (사용자의 city 과 country). 이러한 속성의 state 이제 전 세계적으로 액세스할 수 있습니다!

일반적으로 여기에서 전역 상수를 정의합니다.

Vuex 상태 액세스

상태 값을 검색하는 가장 간단한 방법은 계산된 속성 내에서 상태를 반환하는 것입니다. 글로벌 액세스를 원한다고 가정해 보겠습니다. name 과 age 상태:

computed: { name() { return this.$store.state.name; }, age() { return this.$store.state.age; },
}

물론 이러한 값은 이제 마크업에서 액세스할 수 있습니다.

<template> <div id="app"> <p>Name: {{ name }}</p> <p>Age: {{ age }}</p> </div>
</template>

　 지도 상태() 돕는 사람

이전 예에서 보았듯이 계산된 속성을 선언하는 것은 매우 길어질 수 있습니다. 이를 예상하여 Vuex는 계산된 getter 함수를 생성하기 위한 도우미와 함께 제공됩니다. 그것은 상태 매퍼 계산된 상태를 더 짧은 별칭에 쉽게 매핑할 수 있습니다.

예를 들어 mapState() 도우미 함수 및 맵 state.name 과 state.age 더 짧은 별칭으로:

import { mapState } from "vuex"; export default { name: "ComponentName", computed: mapState({ name: (state) => state.name, age: (state) => state.age, }),
};

게터 함수

Getter 함수는 다음을 수행하는 데 사용되는 함수입니다. 얻을 상점에서 계산된 속성. 속성을 가져오는 동안 필요한 경우 데이터를 반환하기 전에 추가로 필터링, 유효성 검사 또는 조작하도록 선택할 수 있습니다.

예를 들어 정수를 추적하는 상태가 있다고 가정합니다. getter 함수를 통해 숫자를 있는 그대로 반환할 수 있습니다. or 그것들을 정렬하고 반환하기 위해 일부 숫자를 잘라냅니다.

const store = new Vuex.Store({ state: { myNumbers: [11, 3, 5, 1, 54, 56, ...], }, getters: { firstFiveSorted: (state) => { return state.myNumbers.sort().slice; }, },
});

이 getter는 이제 다음에서 사용할 수 있습니다. store.getters 전역 개체이며 모든 구성 요소 내부에서도 액세스할 수 있습니다.

computed: { firstFiveSorted () { return this.$store.getters.firstFiveSorted }
}

하지만, 이 또한 잠시 후 장황해진다. 당신이 할 수 있는 것처럼 지도 상태 별칭에 대해 다음을 수행할 수도 있습니다. 맵 게터 자신의 별칭을 통해 mapGetters() 도우미 기능 :

import { mapGetters } from "vuex"; export default { computed: { ...mapGetters({ myNumbers: "firstFiveSorted", }), },
};

Vuex 돌연변이

Vuex에서 소스 상태를 수정하는 유일한 방법은 변이. 당신은 그들을 다음과 같이 생각할 수 있습니다. methods Vue 인스턴스의 속성이지만 Vuex 저장소의 상태를 수정하는 역할을 합니다. 또한 돌연변이가 수행됩니다. 가게를 통해, 변경 사항을 예측할 수 있는지 확인합니다.

돌연변이는 첫 번째 인수로 상태를 수신하고 두 번째 인수로 선택적 페이로드(즉, 돌연변이를 커밋하는 데 필요한 선택적 인수)를 수신합니다.

const store = new Vuex.Store({ state: { myNumbers: [11, 3, 5, 1, 54, 56] }, mutations: { ADD_NUMBER(state, numberToAdd) { state.myNumbers.push(numberToAdd); }, }
})

그리고 돌연변이를 일으키기 위해서는 다음을 호출해야 합니다. store.commit() 페이로드가 존재하는 경우 돌연변이 이름과 페이로드가 있는 메소드:

this.$store.commit('ADD_NUMBER', 75);

돌연변이를 호출하는 유일한 방법은 범하다 돌연변이의 이름을 전달하여 저장소로 변경합니다.

행위

작업은 데이터를 가져오기 전에 데이터를 가져오고 처리하는 데 사용됩니다. 변화 그 변경을 커밋합니다. 또한 비동기식으로 여러 돌연변이를 만들 수 있습니다. 통화 작업을 통해 돌연변이 자체가 동기식으로 실행됩니다. 또한, 액션은 를 통해 호출되어야 하는 돌연변이와 달리 다른 액션을 호출할 수 있습니다. commit() 방법.

어떤 의미에서는 행동을 다음과 같이 생각할 수 있습니다. 활성화 에이전트 돌연변이가 최종적으로 힘든 작업을 수행하는 변형 데이터의 경우.

액션 수신 context 객체 및 선택적 페이로드를 매개변수로 사용합니다. 컨텍스트 개체는 다음과 같은 메서드에 대한 액세스를 제공합니다. context.commit(), 이를 통해 돌연변이를 커밋할 수 있습니다. context.state()및 context.getters() 스토어의 상태 및 getter에 액세스할 수 있습니다. 그만큼 context 대상 ~이 아니다. 상점 인스턴스 – 상점 인스턴스와 동일한 속성을 노출합니다.

예를 들어 임의의 숫자를 추가하는 비동기 작업을 수행하려고 한다고 가정해 보겠습니다. myNumber 배열 간격 n 초:

const store = new Vuex.Store({ state: { myNumbers: [11, 3, 5, 1, 54, 56, "..."], }, mutations: { ADD_RANDOM_NUMBER(state) { state.myNumbers.push(Math.floor(Math.random() * 10)); }, }, actions: { addNumber({ commit }, time) { setInterval(() => { commit("ADD_RANDOM_NUMBER"); }, time * 1000); }, },
});

액션 자체를 호출하기 위해 우리는 또한 스토어를 호출합니다. dispatch() 기능:

store.dispatch('ADD_RANDOM_NUMBER', 10);

저장소를 통과하면 상태가 예측 가능한 방식으로만 변경됩니다.

결론

이 가이드에서는 Vuex – Vue의 공식 State Management Store를 살펴보았습니다.

Vuex Store는 상태, 게터, 돌연변이 및 작업의 모음입니다. 상태는 전역 상태 속성을 정의하는 데 사용되는 반면 getter는 가져오는 데 사용됩니다. 상태 속성과 getter를 더 짧은 별칭에 매핑하여 참조하기 쉽도록 할 수 있습니다. 돌연변이와 작업은 함께 작동하여 제어된 방식으로 상태 속성을 변경합니다.

이를 통해 다음 Vue 프로젝트에 Vuex를 적용할 수 있습니다!