Vue

Vue - Vuex 상태관리 라이브러리 사용하기

이렇게된이상즐겨 2023. 11. 15. 23:10

Vuex 설치하기

npm install vuex@next --save

또는

yarn add vuex@next --save

 

Vuex 셋팅하기

  • src 폴더 하위에 store.js 파일을 생성한다.
import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      데이터이름: "데이터",
    }
  },
})

export default store
  • main.js에 store.js 파일을 import한다.
import store from './store.js'


app.use(store).mount("#app");

 

  • 이제 store.js에 저장한 state(데이터)는 모든 컴포넌트가 가져다 쓸 수 있다.
<template>

	<h4>{{ $store.state.데이터이름 }}</h4>

</template>

 

Vuex에 있는 state 데이터를 변경하려면

  • vue파일에서 직접 state를 수정하는 것은 위험하다. state를 수정하기 위해서는
  1. store.js에서 mutations라는 오브젝트 항목 안에 수정 방법을 정의한다.
  2. $store.commit('함수명') 을 이용하여 Vuex에서 state.js에게 부탁을 하는 이벤트를 만들어준다.
import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      like: 0,
    };
  },
  mutations :{
    함수명(state) {
      state.age++
    }
  },
});

export default store;

 

 

<button @click="$store.commit('함수명')">버튼</button>

 

버튼을 누르면 나이가 1씩 증가하는 이벤트이다. 

하지만 만약 10씩 증가하도록 하고싶다면, commit에 data를 전달할 수 있다.

<button @click="$store.commit('함수명', 전달 data)">버튼</button>

 

  mutations :{
    함수명(state, data) {
      state.age += data
    }
  },

 

actions 사용하기

서버에서 데이터를 가져와 수정해야할 때는 서버에 ajax 요청을 날리는데, 이 코드는 mutations가 아닌 actions 항목에 작성한다. mutations 함수들을 만들 때 내부에 ajax처럼 오래 걸릴 수 있는 코드를 작성한다면 곤란해질 수 있기 때문이다.

ajax는 비동기로 작동하기 때문에, 시간이 오래 걸린다면 다음 코드를 먼저 실행하려는 경향이 있어 의도치 않은 버그가 생길 수 있다. 따라서 순수하게 state를 변경하려는 함수는 mutations 안에 작성하고, ajax 같은 코드는 actions 안에 작성한다.