Vuex로 상태 관리하기: 기본 사용법

 

Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 강력한 도구입니다. 이 글에서는 Vuex의 기본적인 사용법을 단계별로 설명하겠습니다. 예제 코드를 통해 Vuex를 효과적으로 사용하는 방법을 배워보세요.

1. 프로젝트 생성 및 Vuex 설치

먼저 Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.

npm install -g @vue/cli
vue create my-vue-app

프로젝트를 생성할 때 기본 설정을 사용하거나 원하는 설정을 선택할 수 있습니다. 프로젝트가 생성된 후, 해당 디렉토리로 이동합니다.

cd my-vue-app

이제 Vuex 패키지를 설치합니다.

npm install vuex@next

2. Vuex 기본 설정

Vuex를 설정하는 방법을 살펴보겠습니다.

store/index.js

먼저 store 디렉토리를 생성하고, 그 안에 index.js 파일을 만듭니다. 이 파일에서 Vuex 스토어를 설정합니다.

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0,
      message: 'Hello, Vuex!'
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
});

export default store;

main.js

이제 main.js 파일에서 Vue 애플리케이션에 Vuex 스토어를 추가합니다.

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

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

3. Vuex 상태와 변이를 사용하는 컴포넌트

Vuex의 상태와 변이를 사용하는 간단한 컴포넌트를 만들어보겠습니다.

App.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increment</button>
    <input v-model="newMessage" placeholder="Enter new message"/>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

export default {
  data() {
    return {
      newMessage: ''
    };
  },
  computed: {
    ...mapState(['count', 'message'])
  },
  methods: {
    ...mapMutations(['increment', 'setMessage']),
    updateMessage() {
      this.setMessage(this.newMessage);
      this.newMessage = '';
    }
  }
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

결론

이 글에서는 Vuex를 사용하여 중앙 집중식 상태 관리를 설정하고, 간단한 상태 변이를 사용하는 방법을 알아보았습니다. 이를 통해 Vuex의 기본적인 사용법을 이해하고, 실용적인 예제를 통해 직접 적용할 수 있습니다.