Vue3+TS+Vite 개발 기술: 상태 관리에 Vuex를 사용하는 방법

Vue3+TS+Vite 개발 기술: 상태 관리를 위해 Vuex를 사용하는 방법

소개:
Vue 개발에서 상태 관리는 중요한 주제입니다. Vue가 공식적으로 권장하는 상태 관리 도구인 Vuex는 프로젝트에서 매우 일반적으로 사용됩니다. 이 기사에서는 상태 관리에 Vuex를 사용하고 Vue3, TypeScript 및 Vite로 개발하는 방법을 소개합니다.

1. 종속성 설치
먼저 Vue3을 지원하려면 프로젝트에 Vuex 및 vuex@4 버전을 설치해야 합니다.

npm install vuex@next --save

2 src에 저장소 디렉터리를 만듭니다. 디렉토리를 선택하고 index.ts 파일을 생성합니다. index.ts 파일에서 Vuex Store 인스턴스를 정의하고 전역 사용을 위해 인스턴스를 내보내야 합니다.

// store/index.ts
import { createStore } from 'vuex';

const store = createStore({
  // 定义state
  state: {
    count: 0,
  },
  // 定义mutations
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  // 定义actions
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
});

export default store;

3. main.ts 생성

src 디렉토리의 main.ts 파일에서 Vuex 스토어를 가져와서 createApp 함수에서 사용해야 합니다.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

4. Vuex 사용하기

이제 Vuex의 기본 구성을 설정했습니다. 다음으로 컴포넌트에서 Vuex를 사용할 수 있습니다.

App.vue에서는

보조 기능을 사용하여 스토어에서 증분 돌연변이를 트리거합니다. mapState辅助函数，来映射store中的count值到组件中，并通过使用mapMutations

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

이제 Vue3+TS+Vite 프로젝트에서 Vuex의 기본 사용이 완료되었습니다. Vuex를 사용하면 애플리케이션의 전역 상태를 쉽게 관리하고 상태 공유 및 통신을 달성하여 개발 효율성과 코드 유지 관리성을 향상시킬 수 있습니다.

요약:

이 글에서는 Vue3+TS+Vite 프로젝트에서 상태 관리를 위해 Vuex를 사용하는 방법을 소개합니다. 종속성을 설치하고, 저장소 인스턴스를 생성하고, Vuex 보조 기능을 사용함으로써 프로젝트에서 Vuex를 쉽게 사용하여 전역 상태를 관리하고 공유할 수 있습니다.

위 내용은 Vue3+TS+Vite 개발 기술에서 상태 관리를 위해 Vuex를 사용하는 방법에 대한 소개입니다. 궁금한 점이 있으시면 언제든지 문의해 주세요.

위 내용은 Vue3+TS+Vite 개발 기술: 상태 관리에 Vuex를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!