Vuex

vuex

https://vuex.vuejs.org/

----

React의 Flux패턴에서 기인함

- 컴포넌트들을 효율적으로 관리

- Flux 패턴

- state, getters, mutations, actions

- Helper

----

FLUX

- MVC패턴의 복잡한 데이터 흐름 문제를 해결하는 개발패턴 

- Unidirectional data flow

모든 데이터가 한방향으로 흐른다.

1. action : 화면에서 발생하는 이벤트 또는 사용자의 입력

2. dispatcher : 데이터를 변경하는 방법,메서드

3. model : 화면에 표시할 데이터

4. view : 사용자에게 비춰지는 화면

단방향으로이동

Action -> Dispatcher -> Model -> View -> Action ....

----

- 어플리케이션이 복잡해지면 컴포넌트간의 데이터 전달이 힘들어진다.

- vuex를 사용안할시 이벤트버스로 해결이 가능하나 이벤트를 보낸곳과 받는곳을 알기가 힘들다.

- 컴포넌트간의 데이터 전달이 명시적이지가 않다.

----

vuex로의 해결

MVC 패턴에서 발생하는 구조적 오류

컴포넌트 간 데이터 전달명시

여러개의 컴포넌트에서 같은 데이터를 업데이트 할때 동기화 문제

----

컨셉

State : 컴포넌트 간에 공유하는 데이터 data()

View : 데이터를 표시하는 화면 templete

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

Vuex 설치

ES5와 ES6 2가지 설치방법이 존재

npm install vuex --save

- ES6사용시 더많은 기능과 이점이 있다.

설치당시 최신버전 3.0.1

state

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

https://vuex.vuejs.org/guide/state.html

EX)

Vue

data : {

message : 'Hi'

}

Vuex

state : {

message : 'Hi'

}

출력시

vue

<div>{{message}}</div>

vuex

<div>{{this.$store.state.message}}</div>

getters

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

https://vuex.vuejs.org/guide/getters.html

state : {

num : 10

},

getters : {

getNumber(state) {

return stata.num;

},

doubleNumber(state) {

return stata.num*2;

}

}

<div>{{this.$store.getters.getNumber}}</div>

<div>{{this.$store.getters.doubleNumber}}</div>

mutations

state값을 변경하는 이벤트로직 메서드

https://vuex.vuejs.org/guide/mutations.html

- state의 값을 변경할 수 있는 유일한 방법이자 메서드

- 뮤테이션은 commit() 으로 작동시킨다.

state : {

num : 10

},

mutations : {

printNumber(state) {

return state.num

},

sumNumber(state,anotherNum){

return state.num + anotherNum;

}

}

this.$store.commit("printNumber");

this.$store.commit("sumNumber", 10);

mutation의 commit()형식

- 인자(payload)전달부분

state : {

num:10

},

mutation : {

testState(state,payload){

console.log(payload.text);

return state.num += playload.num;

}

}

this.$store.commit("testState",{

text : 'aaa',

num : 100

});

==

state는 왜 직접변경하지 않고 mutations로 변경할까

- 여러개의 컴포넌트에서 state값을 변경시 어느 컴포넌트에서 해당 stre를 변경했는데 추적하기 어렵다.

actions

비동기 처리 로직을 선언하는 메서드

https://vuex.vuejs.org/guide/actions.html

- 데이터요청, Promise, ES6 asyncㅇ같은 비동기처리는 actions에 선언

// store.js

state : {

num : 10

},

mutations : {

printNumber(state) {

return state.num

},

sumNumber(state,anotherNum){

return state.num + anotherNum;

}

},

actions:{

delayPrintNumber(context){  //context로 store의 메서드와 속성 접근

context.commit('printNumber')

}

}

// App.vue

this.$store.dispatch('delayPrintNumber');

-

modules

https://vuex.vuejs.org/guide/modules.html