Vuex란 한마디로 상태를 관리하는 라이브러리라고 볼 수 있다.
앞에서 이야기한 상태란 data()를 이야기하는 것으로, 컴포넌트간 공유할 수 있는 데이터를 의미하는데, 이것을 관리하는 것을 Vuex라고 부른다.
Vue는 단방향으로 데이터가 흐르기 때문에 규모가 큰 프로젝트의 경우, 과도하게 중첩되는 prop들로 유지보수에 상당한 불편함을 겪게 되는데 이를 Vuex가 가진 store에 저장함으로써 일정부분 해소할 수 있다.
npm install vuex@next //vue3버전에서 vuex를 최신버전으로 설치해주지 않으면 오류가 생길 수 있음
Getters: 어떤 데이터를 저장소의 state에 변수로 관리하고 있다면 그 데이터의 이름, 인덱스 같은 정보들을 getters로 정의하여 쉽게 가져올 수 있다.
Mutations: Vuex는 state에 정의된 변수를 직접 변경하는 것을 허용하지 않는다. 반드시 mutations를 이용하여 state를 변경하여야 한다. mutations는 동기 처리를 통해 state의 변경사항을 추적한다.
Actions: actions는 mutations과 비슷한데, actions를 쓰는 이유는 여러개의 mutations를 실행시킬 수 있으며, 비동기 처리가 가능하다.
<!-- store.js -->
import {createStore} from 'vuex'
import persistedstate from 'vuex-persistedstate';
const store = createStore ({
state() {
return {
user: {}
}
},
mutations: {
user(state, data) {
state.user = data;
}
},
plugins: [
persistedstate({
path: ['user']
})
]
});
export default store;