vuex

vuex란?

무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리

React의 Flux패턴에서 기인한다.

 

vuex가 오 ㅐ필요할까??

복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다,

이 때 컴포넌트 간 데이터 전달을 명시하고, 여러개의 컴포넌트에서 같은 데이터를 업데이트할 때 동기화 문제를 해결할 수 있다.

 

state : 컴포넌트 간에 공유하는 데이터이다. data() 이라고 생각하면 된다.

view : 데이터를 표시하는 화면 template와 같은 거라고 생각하자

action : 자용자의 입력에 따라 데이터를 변경하는 methods

 

view에서 클릭을 하면 action이 실행되고 action이 state를 변경한다.

 

vuex구조

컴포넌트 > 비동기 로직 > 동기 로직 > 상태

컴포넌트에서 액션을 실행하면 뮤테이션을 실행시키고 뮤테이션은 스테이트를 바꾸고 스테이트가 바뀌면 컴포넌트 렌더가 바뀌는 구조같다.

 

Vue.use(Vuex)

이건 플러그인을 사용하는 건데 use는 vue의 플러그인이라는 기능이다.이걸쓰는 이유는 뷰를 사용할 때 전역으로 뷰를 사용하는 모든 영역에 특정기능을 추가하고 싶을 때 ( 글로벌 functionality를 추가하고 싶을 때 사용 )

 

Vuex를 쓴다라고 했기 때문에 this.$store 이렇게 접근이 가능한 것이다.

 

 

Vuex기술요소

state : 여러 컴포넌트에 공유되는 데이터 data

getters : 연산된 state 값을 접근하는 속성 computed

mutations : state 값을 변경하는 이벤트 로직 , 메서드 methods

actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods

 

 

state란?

여러 컴포넌트 간에 공유할 데이터 - 상태

// vue
data : {
	message : 'hello vue.js'
}

// vuex
state : {
	message : 'hello vue.js'
}

//vue
<p>{{message}}</p>

//vuex
<p>{{this.$store.state.message}}</p>

 

getters란?

state값을 접근하는 속성이자 computed() 처럼 미리 연산된 값을 접근하는 속성

state {
 num : 10
 }

getters : {
	getNumber(state) {
    	return state.num;
    },
    doubleNumber(state) {
    	return state.num * 2;
    }
}

<p>{{this.$store.getters.getNumber}}</p>
<p>{{this.$store.getters.doubleNumber}}</p>

getters는 state를 쉽게 접근하는 방법이다.