Vuex를 사용하여 Vue에서 전역 상태를 관리하는 방법에 대한 자세한 설명과 예

Vue.js는 많은 편리한 기능을 제공하는 인기 있는 프런트엔드 프레임워크이지만 애플리케이션이 점점 더 복잡해지면 많은 양의 데이터를 하위 구성 요소에 전달하는 것이 매우 어려워진다는 사실을 곧 알게 될 것입니다. 이것이 Vuex가 Vue에서 중요한 이유입니다. Vuex는 데이터와 상태를 더 쉽게 공유할 수 있게 해주는 전역 상태 관리자입니다. 이 기사에서는 Vuex의 작동 방식을 자세히 살펴보고 이를 Vue 애플리케이션에 통합하는 방법을 보여줍니다.

Vuex란

Vuex는 Vue.js 애플리케이션용 상태 관리 패턴이자 라이브러리로, 크로스 레벨, 다중 구성 요소 및 다중 페이지 상태 공유 문제를 해결하는 데 자주 사용됩니다. 이는 애플리케이션의 상태를 단일 저장소로 중앙 집중화하고 공유 상태를 구현하는 메커니즘을 제공합니다. 수명 주기 전반에 걸쳐 애플리케이션의 모든 상태를 관리하는 데 사용됩니다.

Vuex의 핵심 개념

Vuex는 다음 네 가지 핵심 부분으로 구성됩니다.

state

State는 Vuex에서 관리하는 애플리케이션 상태 저장 영역입니다. State는 애플리케이션의 상태를 저장하는 데 사용되는 일반 JavaScript 객체입니다. 상태를 선언할 때 객체를 정의합니다. 다음 예에서는 간단한 상태 개체를 정의합니다.

const state = {
    count: 0
}

getter

Getter는 상태에서 데이터를 얻는 데 사용됩니다. 얻은 데이터는 상태의 계산된 속성과 유사하게 현재 상태를 기반으로 일부 처리 후에 반환될 수 있습니다.

const getters = {
  getCount(state) {
    return state.count + 1;
  }
}

mutations

Mutation은 데이터의 단방향 작동을 보장하는 데 사용됩니다. 즉, 돌연변이는 데이터를 변경할 수 있지만 데이터를 얻을 수는 없습니다. Mutation은 상태를 수정하는 데 사용되며 상태를 비동기적으로 조작할 수 없습니다. 상태를 수정하려면 commit 메소드를 사용해야 합니다.

const mutations = {
  increment(state) {
    state.count++
  }
}

actions

액션은 비동기 작업을 처리하는 데 사용되며, 액션은 실제로 표준 변형을 트리거합니다. 상태를 직접 변경하지 않고도 상태에 대한 모든 업데이트를 캡슐화할 수 있습니다. 예를 들어 애플리케이션에서 비동기 요청을 보내려는 경우 이를 처리하기 위해 측면에서 작업을 호출할 수 있습니다.

const actions = {
   incrementByAsync({commit}) {
     setTimeout(() => {
       commit('incrementByAsync')
     }, 1000)
   }
 }

Vuex 카운터 예제 구현

저희는 공개된 [Vue-cli 3](https://www.npmjs.com/package/vue-cli) 샘플 프로젝트를 사용하여 공식 스캐폴딩을 통해 Vue 프로젝트를 초기화하겠습니다. .

$ vue create vuex-example

다음 vuex 설치:

$ npm install vuex --save

다음으로 숫자 증가 및 감소를 위한 카운터 애플리케이션의 간단한 예를 만들어 보겠습니다. 그러나 우리는 Vuex를 사용하여 이 카운터의 상태를 관리할 것입니다. 먼저 프로젝트의 src 폴더 아래에 새로운 store.js 파일을 생성하겠습니다. 이곳은 Vuex 매장입니다.

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({commit}) {
            commit('increment');
        },
        decrement({commit}) {
            commit('decrement');
        }
    },
    getters: {
        getCount(state) {
            return state.count;
        }
    }
});

export default store;

위 코드에서는 먼저 Vuex와 Vue를 임포트했습니다. 그런 다음 Vue.use() 메서드를 사용하여 Vuex를 설치했습니다. 현재 카운터 값을 저장하기 위해 간단한 상태 객체를 정의합니다. 또한 현재 카운터 값을 늘리거나 줄이는 데 사용되는 두 가지 돌연변이를 정의합니다. 우리는 증가 작업을 수행하는 작업과 감소 작업을 수행하는 작업의 두 가지 작업을 정의합니다. 마지막으로 현재 카운터 값을 가져오는 getter를 정의합니다.

다음으로 변경 사항을 커밋하고 vuex를 사용하고 App.vue에 저장합니다.

<template>
  <div id="app">
    <h3>{{ count }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import store from './store';

export default {
  name: 'app',
  store,
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

이 파일에서는 Vuex 스토어 모듈을 가져옵니다. Vue 인스턴스에서는 Vuex 상태를 애플리케이션 전체에서 사용할 수 있도록 저장소 객체를 혼합합니다. 다음으로, 현재 카운터 값을 얻기 위해 계산된 속성을 정의합니다. 또한 현재 카운터 값을 증가 및 감소시키는 두 가지 방법을 정의합니다. 우리는 이러한 작업을 개별적으로 호출하기 위해 디스패치 메서드를 사용합니다.

마지막으로, 스토어의 상태를 애플리케이션에서 액세스할 수 있도록 스토어를 vue 인스턴스에 전달합니다. 이제 브라우저를 열고 애플리케이션에 들어가면 간단한 카운터가 표시되며 버튼을 클릭하면 현재 카운터 값이 증가하거나 감소합니다.

Summary

Vuex는 데이터와 상태를 더 쉽게 공유할 수 있게 해주는 Vue.js 애플리케이션용 상태 관리 패턴이자 라이브러리입니다. State, Getter, Mutation 및 Action은 Vuex의 핵심 개념입니다. 심층적인 숙달을 통해 개발자는 Vuex의 상태 변경을 보다 유연하게 처리할 수 있습니다. 이를 바탕으로 Vuex 사용을 시연하기 위해 타이머 샘플 프로그램을 구축했습니다. Vuex에 대해 더 자세히 알아보려면 공식 문서를 확인하세요.

위 내용은 Vuex를 사용하여 Vue에서 전역 상태를 관리하는 방법에 대한 자세한 설명과 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!