vuex (3) 썸네일형 리스트형 Vuex 기술 요소(state, getters, mutations, actions) Vuex 기술 요소 state : 여러 컴포넌트에 공유되는 데이터 (data) getters : 연산된 state 값을 접근하는 속성 (computed) mutations : state 값을 변경하는 동기적 이벤트 로직, 메서드 (methods) actions: 비동기 처리 로직을 선언하는 메서드, api call (aysnc methods) State 란? 여러 컴포넌트에 공유되는 데이터 - 상태 //VUE data: {message: 'Hello Word!' } //VUEX state: { message: 'Hello Word!' } {{ message }} {{ this.$store.state.message }} getters 란? state 값을 접근하는 속성이자 computed( ) 처럼 미리 .. [Vue2] Vuex 에 관하여 Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vuex가 필요한 이유 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다. 로그인 폼에서 id를 하위 컴포넌트로 계속해서 전달해서 내려야 할 때, 중간에 거치는 컴포넌트들이 많아 질수록 계속해서 props를 선언해야 하므로 데이터 전달이 불편해진다. 이벤트 버스로 해결? 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어렵다. // Login.vue eventBus.$emit('fetch', loginInfo); // List.vue eventBus.$on('display', data => this.displayOnScree.. vuex ) mutations 파라미터는 2개 까지 가능하다 mutations: { removeOneItem(state, payload) { localStorage.removeItem(payload.todoItem.item); state.todoItems.splice(payload.index, 1); }, } payload Eng 유효 탑재량 mutations 의 파라미터는 2개 이상이 되면 안된다 하위 컴포넌트에서 2개 이상의 파라미터를 넘기려면 아래처럼 객체화 해서 vuex로 전달하고 payload.속성 으로 접근해야 정상적으로 실행이 된다. 위는 아래 코드의 객체 만드는 과정이 축약된 문법이다. 이전 1 다음
