Vuex란

• 상태(state)를 관리하는 라이브러리.
• 여기서 상태란 data() 즉 변수또는 컴포넌트간 공유할 수 있는 데이터를 말한다.바로 이 상태를 관리하는 것이 Vuex이다.

Vuex가 필요한 이유

• 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우, 지나치게 중첩된 컴포넌트를 통과하는 prop이 생기게된다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있다.
• 공통의 상태를 공유하기 때문에, 이 상태가 여러 컴포넌트에서 동일한 상태로 관리되어야 한다. Vue는 단방향으로 데이터가 흐르기 때문에, 여러 컴포넌트가 한 상태를 공유하는 경우, 형제 컴포넌트간의 상태공유/관리가 복잡해질 수 있다.

Vuex는 store(저장소)를 가지고 있다. 세션/쿠키 localStorage처럼 브라우저가 닫히지 않는이상 계속 유지되거나 하지는 않고, 메모리에 저장되기 때문에 새로고침시 초기화 된다. 컴포넌트 단위의 data()가 그저 어플리케이션 단위의 data()가 된 것이라 보면된다. 새로고침후에도 유지하려면 별도의 라이브러리가 필요

Vuex 설치

npm i vuex --save

store.js파일 생성

// /src 경로에 생성
<script>
  import Vue from "vue";
  import Vuex from "vuex";

  Vue.use(Vuex); // vuex를vue전체에 사용하도록 선언

  export default new Vuex.Store({ // main.js으로 읽어들이도록 한다.
   // 아래에 정의한 것은 어떤 컴포넌트에도 사용 가능하게 된다.
    state: { 
      number: 2
    }
  })

</script>

• Vue.use()를 통해 Vue가 Vuex 사용함을 선언하고, store 인스턴스를 생성해준 것

state

• store에서 관리하고 있는 상태(공통 변수,데이터) 컴포넌트의 data와 같이 데이터를 보존하고 있는 장소.
• 프로젝트 내의 모든 곳에서 참조 및 사용이 가능하다.
• mutations를 통해서만 변경이 가능하다.

<script>
export default createStore({
  state: {
    counter: 10
  },
});
</script>

Mutations

• state를 변경시키는 용도
• 비동기 처리가 아닌 동기 처리를 한다. 위의 함수가 실행되고 종료된 후 그 다음 아래의 함수가 실행.
• commit('실행시킬 함수명','전달 인자 값')으로 실행시킨다.
• mutations 내에 함수 형태로 작성한다.

<script>
	mutations: {
    	setCounter(state, value) {
      		state.counter = value;
    	}
  	}
</script>

Actions

• Actions의 주요 목적은 Mutations를 실행시키는 것.
• 동기 처리가 아닌 비동기 처리를 한다. 순서에 상관없이 먼저 종료된 함수의 피드백을 받아 후속 처리 하게 된다.
• dispatch('함수명','전달인자'