10. Vuex Store

 

2024.03.18

로그인부터 개발 진행 중에 있는데 쿠키 및 세션 관리를 위해 Vuex Store를 통해 개발을 진행하며, 간단한 예제소스와 설명을 남긴다.

---

 

1. 의의

Vue.js 애플리케이션에서 상태 관리를 위해 주로 사용되는 Vuex라이브러리를 통해 상태 관리를 할 수 있다.

Vuex는 Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며, 이를 통해 상태를 예측 가능한 방식으로 관리한다.

 

2. Vuex의 핵심 개념

• State (상태): 애플리케이션의 중앙 저장소로, 컴포넌트 간에 공유되는 데이터.
• Getters (게터): State에 접근하는 계산된 속성입니다. State의 일부 데이터를 가져오거나 가공하여 반환할 수 있다.
• Mutations (뮤테이션): State를 변경하는 유일한 방법으로, 동기적인 작업을 수행.
• Actions (액션): 비동기적인 작업을 수행하거나 여러 뮤테이션을 연달아 호출할 수 있다.
• Modules (모듈): Vuex 저장소를 더 작고 모듈화된 단위로 나눌 수 있다.

3. 예제 코드: Vuex Store를 설정하고, Vue 애플리케이션에서 해당 Store를 등록하여 사용하는 방법

• Vuex Store 설정:

// store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0 // 초기 카운터 값
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
    decrement(context) {
      context.commit('decrement');
    }
  },
  getters: {
    getCount: state => state.count
  }
});

 

• Vue 애플리케이션에서 Vuex Store 사용

<!-- Counter.vue -->

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

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

<style scoped>
/* 스타일을 여기에 작성할 수 있다. */
</style>

 

• Vue 애플리케이션에서 Vuex Store 등록

// main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store, // Vuex Store 등록
  render: h => h(App)
});