0429 Vue.js Vuex , Slot

조이·2021년 4월 28일

vuex

Vue.js

목록 보기

2/3

main.js

애플리케이션 플러그인, 설정을 파악할 수 있는 청사진 이다.

비동기 요청 this

비동기 요청은 http 로 서버로 다녀오기때문에
현재위치의 this 를 벗어난 this 가 생성된다.

따라서 바인딩을
var vm = this; 이런식으로 해주던가

ES6 화살표 함수를 쓰면
호출되는 위치의 this 가져 온다.

Vuex 상태관리도구

복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 라이브러리

중앙통제형식의저장소
props, emit 을 대체할 수 있는 기능이다.
components 가 많아지면서 이를 하나로 관리하기 위한 기능이 필요하다.
components 간의 데이터를 공유할 수 있는 매개체이다.
import 를 할 필요 없이 main.js 에 Vuex 를 설정하여 접근할 수 있다.
- $store.state.data 형식으로 불러올 수 있다.
  - main.js 에 Vue 객체에 적용되어있는 것들은 $ 로 불러올 수 있다.

Vuex 구조

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

시작점 Vue Components

컴포넌트에서 비동기로직인 Actions 를 콜하고,

Actions는 비동기 로직만 처리할 뿐 State(Data)를 직접 변경하진 않는다.

Actions 가 동기로직인 Mutations 를 호출해서 State(Data)를 변경한다.

Mutations에서만 State(Data)를 변경할 수 있다.

state == data 와 동일
actions == method 와 동일
getters == computed 와 동일
- 차이점 : 함수 안에 state,mutations, 등 가져올 속성을 알려(넣어)줘야한다.
mutations == 각각의 컴포넌트내에서 mutation내에 저장되어있는 함수를 commit해서 State 를 변화 시킨다.

commit

commit : 바꾸겠다고 의사를 나타냄(store 에서 mutation 시킬때)

state 를 바꿀때 mutation 함수 안에서
state.allUSers.push(payload) 로 변경시킬 수 있다.

   actions: {
        async LOGIN({ commit }, userData) { // 객체 형태 안에
          // 내가 commit 을 쓸거라고 알려준다.
            const { data } = await loginUser(userData);
            commit('setToken', data.token);
            commit('setUsername', data.resultMap.data.memId);
            saveAuthToCookie(data.token);
            saveUserToCookie(data.resultMap.data.memId);
            return data;
        },
    },

{ } 객체 안에 commit 을 명시해주므로써

{} 객체는 context 를 간단하게 표현하는 것
context.commit() 을 계속해서 사용할 필요없이 이후에
commit() 이 바로 사용 가능하다.

dispatch

1. dispatch : component 에서 Actions 를 실행시키는 명령어이다.
this.$store.dispatch('addUSers',USerObj)
store 에 'addUsers'라는 actions 를 불러올건데 userObj를 매개변수로 넘길거다.

2. store 에서 mutation 을 실행 시킬때

actions: {
  addUsers : ({ commit } ), payload) => {
    commit('addUSers', payload)
  }
}

this.$store.commit('addUsers',userObj) ==> commit 으로 실행시킨다.
첫번째 줄 : store 에서 addUsers 가 실행되고 addUSers는 mutation 하나를 commit 할 것인데
payload를 받는다. 라고 명시되고
두번째 줄 : 위에서 명시한대로 commit 을 진행할 것이고 addUsers라는 mutation 을 진행할 것이다. ( state 를 변화시키는 한 줄)