Vuex란?

• Vue.js 애플리케이션에 대한 상태를 관리하는 라이브러리
• 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할
• Vuex 의 상태는 메모리에 저장되는 것이기 때문에 새로 고침시 초기화 (새로고침 시에도 유지 하고 싶다면 vuex-persistedstate(state - localstorage 동기화 라이브러리) 같은 또 다른 라이브러리가 필요함.)

vuex의 필요성

• 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성하여, 한 화면에서 많은 컴포넌트를 사용합니다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 있음.
• 부모 컴포넌트에서 자식 컴포넌트로 Props를 보내야하는 경우가 많다. 이때 매번 Props로 전달하는 것 보다 공용으로 사용할 수 있는 변수, 상태 집합을 만들어 사용하는 경우, 작업의 편의성을 제공함.
• 공통의 상태를 공유하기 때문에, 이 상태가 여러 컴포넌트에서 동일한 상태로 관리되어야 한다. Vue는 단방향으로 데이터가 흐르기때문에, 여러 컴포넌트가 한 상태를 공유하는 경우, 형제 컴포넌트간의 상태공유/관리가 복잡해질 수 있음.

vuex 설치

/// vue
vue add vuex

/// npm
npm install vuex

/// yarn
yarn add vuex

store.js 설정

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // ...
});

main.js 설정

// main.js
import Vue from "vue";
import App from "./App.vue";
// store.js를 불러오는 코드
import { store } from "./store";

new Vue({
  el: "#app",
  // 뷰 인스턴스의 store 속성에 연결
  store: store,
  render: (h) => h(App),
});

Store의 기본 구조(4)

Vuex는 아래와 같은 순서로 데이터를 단방향으로 관리

각 컴포넌트(dispatch) -> actions(commit) -> mutations(state) -> state -> 모든 컴포넌트에서 사용

상태(State)

• 공통으로 사용할 변수 정의
• 컴포넌트 간 동일한 Data 사용 가능

변이(Mutations)

• 동기적으로 변수(State)의 재정의, 조작, 값 대입 등 변화를 주는 조작부
• 일반적으로 직접호출 불가
• Action에서 commit(‘함수명’, ‘전달인자’)으로 통해서만 실행 가능

액션(Actions)

• 비동기적으로 동작을 처리하는 통신부, 비동기함수들의 집합
• Mutations에 commit 함.
• dispatch(‘함수명’, ‘전달인자’)를 통해 실행 가능

변환(Getters)

• State를 computed와 같이 이용할 수 있게 도움을 주는 함수
• 각 컴포넌트의 공통 사용 정의
• this.$store.getters[‘경로명/함수명’]; 을 사용

Store의 코드 구조

// store.js
import Vue fron 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {},
getters: {}
})

개인적인 이해를 바탕으로 작성한 글 입니다.
잘못된 내용, 피드백은 언제든 환영합니다! 🥺🥺🥺

참고 사이트

Vuex_Vuex가 무엇인가요?
Vue > Store란?
Vuex란? 개념과 예제
Vuex 시작하기 1 - Vuex와 State
[Vue] Vuex에서 Store 사용하기