Vuex 알아보기(1) - state

이번 포스트에서는 vue.js에서 많이 쓰는 라이브러리인 vuex를 알아보겠습니다.

 

사실 이번 포스트(vuex)는 이전부터 한 번 정리를 해보고 싶었는데..

공부도 많이 안해봤고,

실제 적용도 어려운 것 같고,

귀찮기도 하고,

등등

여러가지 핑계를 대면서 미루다가 이제야 쓰게 됩니다.

 

 

https://vuex.vuejs.org/

What is Vuex? | Vuex

vuex의 경우 위의 공식홈페이지를 가보면 더 쉽게 알 수 있습니다.

vuex는 상태관리를 해주는 라이브러리 라고 소개합니다.

이렇게 들으면 쉽게 이해하기 힘듭니다.

예시를 들어보겠습니다.

• name이라는 변수로 정의된 데이터가 있다고 가정합니다.
• 근데 name이라는 변수가 여러 컴포넌트에서 사용이 된다고 하면
• props와 custom event를 계속 써줘야 합니다.
• 근데 이것들을 계속 쓰는 것은 번거롭고 귀찮아서 힘듭니다.
• 이 때 vuex를 쓴다면, 컴포넌트 간 이동을 할 필요가 없습니다.
• 한 군데서 데이터를 저장하고 컴포넌트에서는 이 데이터를 뽑아서 사용하면 됩니다.

즉, 데이터를 저장하는 곳이 따로 있고 데이터 관리는 그 곳에서만 하는 것입니다.

 

오~ 이런 점만 보면 vuex는 무조건 써야할 라이브러리 같습니다.

하지만, vuex를 사용하면 데이터 관리를 할 때 있어서 코드가 길어진다는 단점이 있습니다.

그렇기 때문에 무조건 vuex를 도입하는 것은 권장되지 않고,

데이터가 많고, 동일한 데이터가 여러 곳에서 많이 쓰이는 규모가 큰 프로젝트에서 적당합니다.

소규모 프로젝트의 경우는 한 번 더 생각하고 도입하는 것이 좋습니다.

 

vuex의 설치는 다음과 같이 합니다.

npm install vuex@next --save

(혹은 vuex 공식 홈페이지에 가서 설치 커맨드를 찾아보시기 바랍니다.)

그러면 vuex 라이브러리가 설치됩니다.

 

다음으로 데이터를 저장하는 일종의 저장소 파일을 하나 만듭니다.

src 폴더 밑에 store.js라는 파일을 생성합니다.

( 참고로, vuex에서 데이터 관리를 할 때 store.js라는 이름으로 쓰는 것이 일반적이라고 합니다..

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      
    }
  },
  mutations : {
  
  },
  actions : {
  
  },
  // getters, modules 
})

export default store

store.js의 기본 구조입니다.

• state : 상태관리를 하는 항목이 들어갑니다. 
  → 즉, 관리하려는 데이터 입니다.
• mutations : 이 영역에서 데이터 수정이 이루어집니다.
• actions : ajax 같은 비동기 요청, 시간이 걸리는 요청을 적습니다.

그 외에 getters, modules 항목이 있기는 한데

그것들에 대해서는 아직 자세히 알지 못해서 제외했습니다.

 

그럼 첫번째로 state를 알아보겠습니다.

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      name : "Kim",
    }
  },
  mutations : {
  
  },
  actions : {
  
  },
  // getters, modules 
})

export default store

기존에 data 영역에 적은 것처럼 적으면 됩니다.

그러면 이제 name이라는 변수는 이 저장소에서 관리되고 어느 컴포넌트에서나 사용할 수 있습니다.

 

이제 아무 컴포넌트 영역에 들어가서 다음과 같이 적으면 값이 나오는 것을 확인할 수 있습니다.

<template>
	...
	
    <span>{{ $store.state.name }}<span>
    
	...
</template>

<script>

...

console.log(this.$store.state.name);

...

</script>

그러면 저장소에 저장된 이름이 출력되는 것을 확인할 수 있습니다!

 

이 데이터들은 함부로 변경되면 안됩니다.

• 함부로 변경된다면, vuex를 굳이 쓸 이유가 없습니다.. ㅋㅋ
• 만약 컴포넌트 내에서 바뀐다면,,
  나중에 에러가 났을 때 어떤 컴포넌트에서 에러가 난 것인지 찾기가 너무 힘듭니다.
• 그렇기 때문에 store.js에 있는 데이터들은 store.js에서만 변경되게 해야합니다.
• 그리고 그것은 mutations 영역에서 진행하면 됩니다.

 

다음 포스트에서 mutations에 대해 알아보겠습니다.

 

 

 

 

 

출처 : 코딩애플 - 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드