[VueJS] 데이터 바라보기 - computed

ieed0205·2021년 1월 7일
0

VueJS

목록 보기
16/21
post-thumbnail

computed


computed는 vue 공식 홈페이지에서 잘 설명이 되어있다.
제가 computed를 사용해야한 이슈로는 총 3개의 컴포넌트가 존재했습니다.

1> 컴포넌트

(1) 메뉴 컴포넌트

(2) 메뉴 수정 컴포넌트

(3) 메뉴 추가 컴포넌트

2> 컴포넌트 관계


1. 메뉴 추가 컴포넌트에서 메뉴를 추가시킨다.
2. 해당 메뉴는 메뉴 컴포넌트메뉴수정 컴포넌트반영되어야 한다.

3> 해결방안

기존의 vuex의 store를 활용하고 있던 프로젝트이기에 각 컴포넌트에서 computed로 변수를 선언하여 store에 있는 데이터를 가리켜야 합니다.

...
    computed: {
        desserts(){
            return this.$store.state.menu.items
        }
    },

desserts는 store에 있는 menu 모듈의 items을 가리키고 있습니다.
desserts는 이제 다른 컴포넌트에서 값이 변경되어도 현재 사용되어지는 컴포넌트에서 변경이 되어집니다.

profile
🔥 머릿속으로 생각하지만 말고, 행동으로 보여줘

0개의 댓글