🔒 컴포넌트 단에서 직접적으로 Mutation을 호출하지 않는다 🤔

Modified: 2022.05.11

실제 코드에서는 컴포넌트 로직에서 commit으로 직접적인 변경을 허용하고 있지만

Vuex의 상태 변경 흐름 상 Mutation을 건드리는 것은 코드 작성의 일관성이 떨어진다.

상태 변경에 따른 분기 처리에 대해선 모두 Actions에서 처리하고 Mutations의 함수들은 state에 대한 변경만 진행한다.

Vue 3.0에서는 Pinia 상태관리 라이브러리 도입을 고려한다.

🎯 전역 상태들은 컴포넌트 로직에 바로 사용하지 않고, computed를 거쳐 사용한다

Modified: 2022.05.11

컴포넌트 단에서 전역 상태 정보를 확인한다면, this.$store.state.,,,, 방식으로 코드가 작성이 되는데이를 그대로 사용하게 된다면 코드의 길이가 길어질 수 있다.

state에 지정한 변수명과 동일하게 컴포넌트의 computed에 지정하여 사용한다.

🎯 Props 정의는 가능한 상세히 정의한다

Modified: 2022.05.10

// ❌ wrong
props: ['status']
 
// ⭕ correct
props: {
    // js
    status: {
        type: String,
        required: true,
        validator: function (value) {
            return [
               'syncing',
                'synced',
                'version-conflict',
                'error'
            ].indexOf(value) !== -1
        }
    }
    // ts
    data: {
        type: Object as PropType<dataType>
        required: true,
    }
}

prop의 정의는 가능한 상세하게 작성한다.