[VUE] VUEX

Vuex

vuex는 vue에서의 전역 상태관리 라이브러리이다.

state 만들기

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
      name : 'kim',
      age : 20,
    }
  },
  mutations :{
    한살더하기(state){
      state.age++
    }
  },
})

export default store

createApp 부분에 써주기

import store from './store.js'
app.use(store).mount('#app')

state 접근

<div>{{ $store.state.message }}</div>

getter

Vuex에서 getter는 저장소(state)의 데이터를 가공하거나 계산된 속성(computed) 처럼 사용하는 데에 유용한 메소드이다. getter를 사용하여 저장소의 데이터에 접근 및 가공할 수 있다.

아래엔 그 예시를 든 예제이다.

const store = createStore({
  state: {
    todos: [
      { id: 1, text: 'Buy groceries', done: false },
      { id: 2, text: 'Finish homework', done: true },
      { id: 3, text: 'Clean room', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    // getter에 다른 getter를 활용할 수도 있음
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

<template>
  <div>
    <h2>Done Todos</h2>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <p>Total Done Todos: {{ doneTodosCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    // getter를 computed 속성으로 사용
    doneTodos() {
      return this.$store.getters.doneTodos;
    },
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    }
  }
};
</script>

이 예제에서는 store/state에 todos라는 배열이 있고, 그 배열을 기반으로 두 개의 getter를 정의하였다. doneTodos는 완료된 할 일들을 필터링한 배열을 반환하고, doneTodosCount는 완료된 할 일의 개수를 반환하며 사용할 컴포넌트에서 computed 속성을 사용해 getter들을 활용하고 있다.

뮤테이션(mutations)

뮤테이션(mutations)은 뷰엑스에서 상태 값을 변경하는 유일한 방법이다.
상태는 항상 뮤테이션으로 변경된다.

mutations 선언

const store = createStore({
  state: {
    message: 'Hello Vue.js'
  },
  mutations: {
    reverseMessage(state) {
      state.message = state.message.split('').reverse().join('');
    }
  }
})
 

mutations 호출
컴포넌트에서 뮤테이션을 호출하려면 commit() API를 사용한다.

// Vue 파일 내에서 

  methods: {
    reverseMsg() {
      this.$store.commit('reverseMessage');
    }
  }

actions

액션(actions)은 뮤테이션 중에서 비동기 처리 로직들을 정의하는 속성이다.

예제

 mutations: {
    reverseMessage(state, data) {
      state.message = data.split('').reverse().join('');
    }
  },
  actions: {
    fetchMessage(context) {
      axios.get(url).then(function(response) {
        context.commit('reverseMessage', response.message);
      });
    }
  }


// Vuex 스토어를 생성합니다.
const store = createStore({
  // 스토어의 초기 상태를 정의
  state: {
    // 메시지를 저장하는 상태 속성을 정의
    message: ''
  },
  
  // 뮤테이션(mutations)은 스토어의 상태를 변경하는 메소드를 정의
  mutations: {
    // reverseMessage 뮤테이션은 받아온 데이터를 역순으로 바꿔서 state.message에 저장하는 함수
    reverseMessage(state, data) {
      state.message = data.split('').reverse().join('');
    }
  },
  
  // 액션(actions)은 비동기 로직을 포함한 메소드를 정의
  actions: {
    fetchMessage(context) {
      axios.get(url).then(function(response) {
      // 외부에서 데이터를 가져오는 비동기 동작 (axios를 사용하여 데이터를 가져옴)
      context.commit('reverseMessage', response.message);
      // 가져온 데이터를 reverseMessage 뮤테이션을 통해 상태에 반영
      });
    }
    // fetchMessage 액션은 외부에서 데이터를 가져와서 뮤테이션을 호출하여 스토어의 message state의 상태를 변경
  }
});
 

주요 포인트:

📖 기본원리

context.commit('reverseMessage', response.message);에서 context.commit을 사용하여 
reverseMessage 뮤테이션을 호출하고, response.message를 뮤테이션에 전달합니다. 
이로써 message 상태가 역순으로 변경됩니다.

이 코드는 비동기 작업을 수행하는 상황을 가정하고 있으며, 이를 위해 외부에서 데이터를 가져오는 것을 시뮬레이션하기 위해 actios안에서 axios를 사용하는 중이다.

---

이때 context의 의미를 이렇게 정의 할 수 있다고 한다 (찾아봄)

context.state: 현재 모듈의 상태에 접근합니다. context.state를 통해 현재 모듈의 상태를 읽어올 수 있습니다.

context.rootState: 루트 스토어의 상태에 접근합니다. 모듈화된 상태에서 루트 스토어의 상태를 읽어올 때 사용합니다.

context.getters: 현재 모듈의 게터에 접근합니다. context.getters를 통해 현재 모듈의 게터를 호출할 수 있습니다.

context.commit(mutationType, payload): 뮤테이션을 호출하여 상태를 변경합니다.
mutationType은 호출할 뮤테이션의 타입이며, payload는 뮤테이션에 전달되는 데이터입니다.

context.dispatch(actionType, payload): 다른 액션을 호출합니다.
actionType은 호출할 액션의 타입이며, payload는 액션에 전달되는 데이터입니다.

context는 일종의 인터페이스로서, 액션 내부에서 스토어에 접근하거나 스토어의 상태를 변경하는 메소드를 호출하는 데 사용됩니다.

주로 비동기 작업을 수행하는 액션에서 사용되며,

스토어의 데이터를 변경하거나 다른 액션을 호출하는 등의 작업을 수행할 수 있습니다.

---

actions를 컴포넌트에서 호출하는법

// Vue 파일 내에서
  methods: {
    getMessage() {
      this.$store.dispatch('fetchMessage');
    }
  }
})

Hellper

뷰엑스의 기술 요소 전부 헬퍼 함수를 갖고 있습니다. 사용법은 다음과 같습니다.

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(), // store state를 불러오는 함수
    ...mapGetters() // store getter를 불러오는 함수 
  },
  methods: {
    ...mapMutations(), // store mutations를 불러오는 함수
    ...mapActions(), // store actions를 불러오는 함수
  }
}

---

💡결론

동기 처리는 뮤테이션, 비동기 처리는 액션으로 생각하면 된다.