VUE3 시작하기 튜토리얼: Vuex State Management를 사용하여 글로벌 데이터 관리 구현

Vue.js의 지속적인 개발로 Vue 3도 공식적으로 출시되었으며 Vue 2와 비교하여 Vue 3에는 프록시 객체를 사용하여 데이터를 가로채고 하이재킹하는 등 많은 최적화 기능이 있습니다. 그러나 실제 응용 프로그램에서는 대규모 응용 프로그램 프로젝트에 많은 구성 요소가 포함되는 경우가 많기 때문에 전역 상태 관리가 점점 더 중요해집니다. 현재로서는 Vuex가 매우 좋은 솔루션입니다.

1. Vuex 소개

Vuex는 Vue 애플리케이션의 여러 구성 요소 간에 상태(데이터)를 공유하는 문제를 해결하도록 설계된 Vue.js의 공식 상태 관리 라이브러리입니다. 핵심 개념은 다음과 같습니다.

• 상태: 애플리케이션에서 전역적으로 관리해야 하는 데이터입니다.
• Getter(값 getter): 상태에서 일부 상태를 파생하는 데 사용됩니다(구성 요소의 계산된 속성과 유사).
• Mutation(뮤테이션): 상태의 데이터를 수정하는 데 사용됩니다. Vuex 데이터는 Mutation에서 동기적으로 업데이트되므로 데이터의 일관성이 보장될 수 있습니다.
• Action: Mutation과 유사하게 상태의 데이터를 수정하는 데에도 사용되지만 비동기적으로 작동할 수 있으며 네트워크 요청과 같은 비동기 작업을 시작하는 데 사용할 수 있습니다.

이러한 핵심 개념의 유연한 사용을 통해 Vuex는 글로벌 데이터 관리를 달성하여 구성 요소 간의 전송 및 작동을 단순화할 수 있습니다.

2. Vuex Store 생성

Vuex의 데이터는 Store 객체에 저장되므로 먼저 Store 객체를 생성해야 합니다. Vue 3에서는 저장소 객체를 생성하는 방법이 Vue 2와 약간 다릅니다.

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

위 코드에서는 createStore 메소드를 통해 저장소 객체를 생성하고 객체에 전달했습니다. 객체에는 상태, 돌연변이, 작업 및 게터라는 네 가지 속성이 포함되어 있습니다. 그중 state 속성은 전역 상태 개수의 초기 값을 0으로 정의하고, mutations 속성은 count 값을 1씩 증가시키는 기능을 구현하는 mutation 메서드 increment를 정의합니다. actions 속성은 다음을 구현하는 작업 메서드 incrementAsync를 정의합니다. 카운트 값의 비동기 증가. getters 속성은 카운트 값의 두 배를 반환하는 getter 메서드 doubleCount를 정의합니다.

3. 컴포넌트에서 Vuex 사용

스토어 객체를 생성한 후 해당 데이터와 메소드를 컴포넌트에서 직접 사용할 수 있습니다. Vue 3에서는 <script setup> 구문을 사용하여 Vuex의 데이터와 메서드를 사용할 수 있습니다.

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

위 코드에서는 useStore 함수를 통해 store 객체를 얻었고, handlerClick 메소드에서 increment 메소드를 호출하여 카운트 값을 수정했습니다. 템플릿에서는 store.state.count를 통해 카운트 값을 얻을 수 있고, store.getters.doubleCount를 통해 두 배의 카운트 값을 얻을 수 있습니다.

4. 요약

이 글의 소개를 통해 Vuex의 기본 개념과 사용법을 이해할 수 있습니다. 실제 개발에서 애플리케이션이 대량의 글로벌 데이터를 관리해야 하는 경우 Vuex를 사용하는 것이 좋은 선택입니다. 이는 구성 요소 간의 상호 작용을 크게 단순화하고 개발 효율성을 향상시킬 수 있습니다.

위 내용은 VUE3 시작하기 튜토리얼: Vuex State Management를 사용하여 글로벌 데이터 관리 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!