Vue
Vue - Vuex 상태관리 라이브러리 사용하기
이렇게된이상즐겨
2023. 11. 15. 23:10
Vuex 설치하기
- https://vuex.vuejs.org/installation.html 에 나와있는 가이드대로 설치한다.
- 아래는 터미널에서 설치하는 방법이다.
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를 수정하기 위해서는
- store.js에서 mutations라는 오브젝트 항목 안에 수정 방법을 정의한다.
- $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 안에 작성한다.