vuex store 알아보기

rhak39·2021년 10월 14일
0

vue

목록 보기
4/6

✍ Vuex 개념

상태 관리를 위한 패턴이자 라이브러리이고, 중앙 집중식 저장소 역할을 담당

상태관리란?

  • 여러 컴포넌트 간에 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴

중앙 집중식 저장소 역할

  • 데이터를 store라는 파일을 통해 관리하고 프로젝트 전체에 걸쳐 활용할 수 있게 해주는 방법
  • vuex를 사용하는 프로젝트는 프로젝트 전체에서 사용되는 변수를 store의 state에 저장하고 사용하게 됨

상태관리 구성요소 3가지

  1. state : 컴포넌트 간에 공유할 data
  2. view: 데이터가 표현될 template
  3. actions: 사용자의 입력에 따라 반응할 methods

아래의 구성요소는 단방향으로 흐른다.

설치

$ npm install vuex

사용법

  1. store.js(관례에 따른 이름) 파일을 하나 만든다.
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
	   // 모든 컴포넌트에서 공통으로 사용할 변수(data) 정의
	},
	mutations: {
	   // state 값을 변경시키는 역할(methods -> 동기적)
	},
	getters: {
	   // 컴포넌트의 계산된 속성의 공통 사용 정의(computed)
	},
	actions: {
	   // setTimeout()이나 ajax같이 결과를 받아올 타이밍이 예측되지 않는 로직 작성(methods -> 비동기적)
	}
})
  1. 프로젝트의 main.js에 store.js를 등록한다.
import { store } from "./store";

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

VUEX의 핵심 구성

1. state

  • 프로젝트에서 공통으로 사용할 변수를 정의
  • 프로젝트 내의 모든 곳에서 참조 및 사용이 가능
  • state에 등록한 counter 속성은 $store.state.counter로 접근할 수 있다.

📝 MainPage.vue

<p>{{ $store.state.counter }}</p>

📝 store.js

export const store = new Vuex.Store({
	state: {
		counter: 0,
	},
});

2. getters

  • 컴포넌트의 계산된 속성의 공통 사용 정의
  • computed에 등록하여 사용 (함수 형태)
  • computed의 장점인 캐싱 효과는 단순히 state 값을 반환하는 것이 아니라, getters에 선언된 속성에서 filter(),reverse()등의 추가적인 계산 로직이 들어갈 때 발휘된다.
  • getters에 있는 전달 인자는 state와 getters이다. getters는 다른 getter이다.

📝 MainPage.vue

<p>{{ $store.getters.doubleCounter }}</p>
<!-- return 2 -->

📝 store.js

export const store = new Vuex.Store({
	state: {
		counter: 1,
	},
	getters: {
		doubleCounter(state) {
			return state.counter*2 
		}
	},
});

3. mutations

  • state 값을 변경시키는 역할 (mutations을 통해서만 state를 변경해야 함)
  • methods에 등록하여 사용 (함수 형태)
  • 동기적 처리(위의 함수가 실행되고 종료된 후에 아래의 함수가 실행)
  • metations의 전달 인자는 state와 payload이다.
  • 기본 인자는 state만 사용할 수 있고, commit로 넘어온 인자는 payload만 있다.
  • payload는 여러 개를 묶는 객체 형태로 전달될 수 있다.(*payload: 전송되는 data)
  • 또한 바로 중괄호로 묶어서 객체 형태로도 전달받을 수 있다.
this.$store.mutations.addCounter; // 이런식의 호출이 불가능하고
this.$store.commit("addCounter"); //commit을 이용하여 mutations 이벤트를 호출

📝 MainPage.vue

<template>
  <div id="app">
        <!-- 숫자 1씩 증가 -->
        <p>{{ $store.state.counter }}</p>
        <button @click="$store.commit('addCounter')">+</button>
        <!-- 숫자 8로 증가 -->
	<p>{{ $store.state.payloadCheckNum }}</p>
	<button @click="changeNum"> button </button>
  </div>
</template>

<script>
export default {
	methods: {
		changeNum() {
			this.$store.commit("changeNum", {
				value: 8
			})
		}
	}
}
</script>

📝 store.js

export const store = new Vuex.Store({
	state: {
      		counter: 1,
      		payloadCheckNum: 1
	},
	mutations: {
		// state 값을 변경시키는 역할(methods -> 동기적)
		addCounter(state) {
			state.counter++;
		},
		changeNum(state, payload) {
			state.payloadCheckNum = payload.value
		}
	},
});

4. actions

  • 비동기적 처리 (순서에 상관없이 먼저 종료된 함수의 피드백을 받아 후속 처리)
  • → setTimeout()이나 ajax같이 결과를 받아올 타이밍이 예측되지 않은 로직 작성
  • state 관리에 주안점
  • methods에 등록하여 사용 (함수 형태)
  • 비동기적 처리이기 때문에 보통 콜백 함수로 작성
  • actions를 호출할 때는 dispatch()를 이용
  • actions에 전달 인자는 context와 payload가 있고, 넘기는 방법은 mutations와 유사하다.

📝 MainPage.vue

<template>
  <div id="app">
        <!-- 숫자 1씩 증가 -->
        <p>{{ $store.state.counter }}</p>
        <button @click="addCounter">+</button>
		<button @click="delayFewMinutes"> button </button>
  </div>
</template>

<script>
export default {
	methods: {
		addCounter() {
			this.$store.commit("addCounter")
		},
		delayFewMinutes() {
			this.$store.dispatch("delayFewMinutes")
		}
	}
}
</script>

📝 store.js

export const store = new Vuex.Store({
	state: {
      		counter: 1,
	},
	mutations: {
		addCounter(state) {
			state.counter++;
		},
	},
  	actions: {
		delayFewMinutes(context) {
			return setTimeout(function () {
				context.commit("addCounter");
			}, 1000);
		},
	}
});
profile
하루하루는 성실하게 인생 전체는 되는대로✏️

0개의 댓글