[Vue] 5장 상태관리

1.Vue 상태관리

Vue.js에서 상태를 관리하는 애플리케이션으로 Vuex를 사용할 수 있습니다. Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴이자 라이브러리로, Vuex를 사용하면 컴포넌트 간에 공유되는 상태를 중앙 집중식으로 관리할 수 있습니다. Vuex의 주요 구성 요소로는 다음과 같습니다.

• State: 애플리케이션의 상태를 저장하는 객체 
• Getters: 상태를 계산하여 반환하는 메서드로, 컴포넌트에서 상태를 쉽게 가져올 수 있도록 도움
• Mutations: 상태를 변경하는 유일한 방법으로, 동기적으로 상태를 변경 
• Actions: 비동기 작업을 처리하고, 그 결과로 mutations을 호출하여 상태를 변경
• Modules: Vuex 스토어를 모듈화하여 큰 애플리케이션의 상태를 관리

---

2. Vuex 설치

Vuex를 설치하려면 npm또는 yarn을 사용해서 라이브러리를 다운받을 수 있습니다.

npm install vuex --save && yarn add vuex

 

프로젝트 디렉토리에 store.js 파일을 생성하고 Vuex 스토어를 설정합니다.

// store.js
import Vuex from '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: {
    currentCount: (state) => state.count,
  },
})

export default store

 

main.js에서 Vue 인스턴스에 Vuex 스토어를 추가합니다.

// main.js
import Vue, { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 라우터 import
import store from './store'

const app = createApp(App)
app.use(router) // 라우터 추가
app.use(store) // vuex 스토어 추가
app.mount('#app')

new Vue({
  render: (h) => h(App),
  store,
}).$mount('#app')

---

3. 컴포넌트에서 Vuex 사용하기

이제 Vuex 스토어를 사용할 수 있습니다. Counter.vue 컴포넌트를 만들어 Counter를 구현해보겠습니다.

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

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

---

4. Vuex 모듈화

애플리케이션이 커지면 스토어를 모듈화하여 관리할 수 있습니다. 

// modules/counter.js 
const state = {
  count: 0,
}

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

const actions = {
  increment({ commit }) {
    commit('increment')
  },
  decrement({ commit }) {
    commit('decrement')
  },
}

const getters = {
  currentCount: (state) => state.count,
}

export default {
  state,
  mutations,
  actions,
  getters,
}

 

이제 store.js에서 모듈을 사용합니다.

import Vuex from 'vuex'
import counter from './module/counter'

const store = new Vuex.Store({
  modules: {
    counter,
  },
})

export default store

---

 

GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJS