Vuex 이해하기

이선용·2022년 9월 26일
0

Vuex

Vuex란 한마디로 상태를 관리하는 라이브러리라고 볼 수 있다.
앞에서 이야기한 상태란 data()를 이야기하는 것으로, 컴포넌트간 공유할 수 있는 데이터를 의미하는데, 이것을 관리하는 것을 Vuex라고 부른다.
Vue는 단방향으로 데이터가 흐르기 때문에 규모가 큰 프로젝트의 경우, 과도하게 중첩되는 prop들로 유지보수에 상당한 불편함을 겪게 되는데 이를 Vuex가 가진 store에 저장함으로써 일정부분 해소할 수 있다.

Vuex 설치 방법

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;
profile
React, Vue등 여러 라이브러리와 프레임워크를 배우고 활용하기를 좋아하는 주니어 프론트엔드 개발자 입니다. 저에게 흥미가 있거나 궁금한점이 있으신 분들은 글을 남겨주시면 언제든지 응답해드리겠습니다.

0개의 댓글