전체 글42 [Vue] Vuex 활용해보기 04 - Actions 출처: https://joshua1988.github.io/web-development/vuejs/vuex-actions-modules/ (1) Actions란? Mutations에 비동기처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵다. 따라서 setTimout() 이나 서버와의 http 통신 처리 같이 결과를 받아올 타이밍이 예측되지 않은 로직은 Actions에 선언한다. (2) Actions 등록 store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ state:{ counter: 0 //count.. 2022. 12. 28. [Vue] Vuex 활용해보기 03 - Mutations 출처 : https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/ (1) Mutations 란? State 값을 변경하는 로직을 의미한다 -Getters 와의 차이점 인자를 받아 Vuex에 넘겨줄 수 있다. computed가 아닌 methods에 등록한다. -Actrions 와의 차이점 Mutations는 동기적 로직을 정의 Actions는 비동기적 로직을 정의 (Mutations의 성격 상 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수 있기 때문) 이전까지의 진행 내용 중 맞지 않는 구현 방식 addCounter() { this.$store.state.counter++; }, subCou.. 2022. 12. 28. [Vue] Vuex 활용해보기 02 - Getters 출처: https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/ (1) Getter란? 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복 호출 하게 되는 것 입니다. 중복된 코드 반복 호출 예시 // App.vue computed: { doubleCounter() { return this.$store.state.counter * 2; } }, // Child.vue computed: { doubleCounter() { return this.$store.state.counter * 2; } }, 이때, Vuex의 state 변경을 각 컴포넌트에서 수행하는 것이.. 2022. 12. 28. [Vue] Vuex 활용해보기 01 - Vue앱과 비교, Vuex의 state Vuex의 활용법에 대해 잘 정리해 놓으신 블로그가 있어 내용을 그대로 옮겨 오기 보다는 다시 한번 직접 내용을 작성해보고 실제로 프로젝트를 만들어 내가 진행해보면서 Vuex활용법을 익혀보고자 하였다. https://joshua1988.github.io/web-development/vuejs/vuex-start/#vuex-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-5---state-%EB%93%B1%EB%A1%9D (Vue에 대해서도 잘 정리해 두셔서 추후에 스터디 진행 예정) 1) 간단한 Vue App 구성 Parent, Child 컴포넌트 제작 +버튼 누르면 카운터 넘버 올라가고 - 버튼 누르면 카운터 넘버 감소 컴포넌트 간 데이터 전달 시 props 속성 사용 따라서 상위 컴.. 2022. 12. 28. 이전 1 2 3 4 5 6 7 ··· 11 다음
