문제

개발을 하다보니 클릭 후 서버에 갔다오고 나서 데이터를 렌더링해줘야하는데 한 틱 늦게 적용되는 것을 확인했다.

그 코드는 다음과 같다.

App.vue

<template>
	<ul @click="[loadDetail(아이디값)]">
    	...
    </ul>
    <div :class="{'noview':active!==index}" ref="panel">
    	<div>
        	<textarea v-model="viewData"></textarea>
        </div>
    </div>
</template>

해당 스크립트

<script>
export default {
    data() {
        return{
            viewData: null,
        }
    },
    methods:{
        async loadDetail(id) {
            const postNumber = id;
            try {
                await this.$store.dispatch('모듈/메서드',postNumber);
                this.viewData = this.$store.getters['모듈/게터메서드'];
            } catch (err) {
                console.log(err);
            }
        }
    }
}
</script>

해결법

• computed 속성 추가하여 데이터를 listen하여 변경된 값을 바로 적용할 수 있도록 한다.

App.vue

<template>
	<ul @click="[loadDetail(아이디값)]">
   		...
    </ul>
    <div :class="{'noview':active!==index}" ref="panel">
    	<div>
        	<textarea v-model="check_detailData"></textarea>
        </div>
    </div>
</template>

해당 스크립트(+computed, watch prop)

<script>
export default {
    computed: {
        check_detailData(){
            return this.$store.getters['모듈/게터 메서드'];
        }
    },
    methods:{
        async loadDetail(id) {
            const postNumber = id;
            try {
                await this.$store.dispatch('모듈/메서드',postNumber);
            } catch (err) {
                console.log(err);
            }
        },
    },
}
</script>

• 앞서도 포스팅 하였는데 computed 속성으로

1. 템플릿 내에 들어가는 값이 변환이 되어야 하는데 이때 많은 연산을 해야 할 경우 위와 같이 할 경우 템플릿이 간단하지 않고, 함수도 매번 정의해야 할때.

2. store의 값을 getters로 가져와 템플릿 내에 보여줘야 할때
   이럴때 사용하는 것이 computed이다.
   또한 computed속성의 getter함수는 side-effects가 없어 코드를 테스트하기 쉽다.