[Udemy Vue 완벽가이드 Section15] 213. 저장소 생성 및 사용하기

# Vuex 설치

npm run serve 작동시키 전, Vuex를 먼저 설치해야한다.

npm install --save vuex

 

최신버전을 설치하려면 vuex 뒤에 @next를 추가하자.

npm install --save vuex@next

 

이렇게 하면 앞서 라우터를 설치했던 것처럼 프로젝트에 Vuex패키지가 설치된다.

이제 Vuex를 사용할 수 있다.

 

 

 

# Vuex 예제

파일은 아주 간단한 앱이다.

Vuex가 필요할 정도의 애플리케이션은 아니지만, Vuex의 핵심 개념을 이해하기에 아주 좋은 예시.

이제 npm run serve로 개발 서버를 작동해보자.

 

위와 같이 'Vuex'라고 적힌 간단한 컨테이너가 있다.

App.vue 템플릿 내부의 base-container안에 'Add 1'이라는 버튼을 하나 추가해보자.

그리고, 0부터 시작해 버튼을 누를 때마다 1씩 증가한 값을 출력하는 h3태그의 counter를 추가해보자.

<!--App.vue-->
<template>
  <base-container title="Vuex">
    <h3>0</h3>
    <button>Add 1</button>
  </base-container>
</template>

 

물론 이 동작은 data와 methods, 그리고 앞서 배운 내용을 종합해 구현할 수 있다.

이렇게 간단한 앱은 보통 그렇게 처리하지만, 이번에는 Vuex로 counter 상태를 관리해보자.

 

 

앱의 다른 부분에서도 필요한 Global state로 취급할 예정이다.

 

1/ main.js에서 애플리케이션 state를 저장하는 Vuex 저장소를 생성해보자.

- 앱 당 하나만 있어야 한다.

- 'vuex'에서 createStore함수를 불러와서 저장소를 만든다.

import { createStore } from 'vuex';

 

보면, 아래와 같은 패턴이 있다.

- 메인 Vue앱 생성은 createApp, 

- 라우터 생성은 createRouter,

- 저장소 생성은 createStore.

 

 

2/ 저장소를 store라는 이름의 상수 안에 저장

createStore를 호출한다.

- createStore는 저장소를 구성하는 객체를 취한다.

- 저장소 구축 시, 가장 중요한 건 바로 state.

- state는 state 객체를 반환하는 메서드. (컴포넌트의 data와 비슷하다.)

• 애플리케이션의 state가 된다.
• 즉, state 객체는 애플리케이션 전체와 관련된 data를 보유한다.

- 저장소는 전체 애플리케이션 당 하나만 가진다.

 

 

상태 객체에 counter를 넣고, 초깃값은 0으로 설정하자.

import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const store = createStore({
  state() {
    return {
      counter: 0,
    };
  },
});

 

 

3/ 애플리케이션 - 저장소 연결

이제 앱을 이 저장소에 연결해야한다.

→ app.use를 호출해 저장소를 전달하면 된다.

라우팅 섹션에서 라우터로 했던 것과 똑같다.

// main.js
import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const store = createStore({ //1.저장소 생성
  state() {
    return {
      counter: 0,
    };
  },
});

const app = createApp(App);
app.use(store); //2.저장소-애플리케이션 연결

app.mount('#app');

 

이제 이 컴포넌트에 있는 state를 전체 앱의 모든 컴포넌트에서 사용할 수 있게 되었다.

inject같은 걸 추가해줄 필요 없이, state를 사용하면 된다.

 

 

4/ state 사용방법

그렇다면 state를 컴포넌트에서 어떻게 사용할까?

모든 컴포넌트에서 액세스할 수 있는 새 프로퍼티가 있다.

→ Vuex 저장소를 가리키는 $store 프로퍼티.

또한 이 $store는 저장소에서 관리하는 state를 가리키는 state프로퍼티를 가진다. (여기서 말하는 state는 state객체를 말한다.)

// main.js
const store = createStore({
 state() {
   return { // 이 state객체를 말하는 것.
    counter: 0
  }
 }
});

<!--App.vue-->
<template>
  <base-container title="Vuex">
    <h3>{{ $store.state.counter }}</h3>
    <button>Add 1</button>
  </base-container>
</template>

 

 

이렇게 state인 counter에 접근하는 counter 프로퍼티를 가질 수 있다.

저장하면 0이 생긴다.

 

'Add 1'버튼을 눌러도 아직 연결 전이라 아무 변화가 없다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.