이 논리를 Vuex 스토어에 배치해야 합니까?매장 또는 로컬 컴포넌트 상태에 있어야 할 시기를 알 수 없습니다.

이 논리를 Vuex 스토어에 배치해야 합니까?매장 또는 로컬 컴포넌트 상태에 있어야 할 시기를 알 수 없습니다.

현재 인증 로직으로 Vuex 스토어를 사용하고 있습니다.애플리케이션 내 어디에서나 사용자 토큰, 사용자 ID, 사용자 이름 등의 정보에 액세스할 수 있는 것이 매우 유용한 이유를 알 수 있습니다.인증 로직은 매장 소유라고 100% 확신하고 있습니다.

다만, 현재 Google Maps를 가지고 놀고 있어, Google Map이 들어간 컴포넌트와 지도에 Google 마커를 표시, 추가, 삭제하는 3가지 기능을 가지고 있습니다.이 논리를 Vuex 스토어로 옮겨야 할지 모르겠습니다.향후에는 [] 속성을 다른 컴포넌트에 사용해야 할 것 같습니다.다른 컴포넌트에서는 사용되지 않을 것 같습니다.

이 경우 Vuex 스토어를 사용하는 장점 중 하나는 이 컴포넌트의 가독성이 향상되고 모든 논리가 한 곳에 배치된다는 것입니다만, 논리를 이동할 필요가 있는지 잘 모르겠습니다.

<template>
    <div class="container">
        <div class="map">
            <GmapMap
                @click='addMarker'
                :center="center"
                :zoom="zoom"
                :map-type-id="map"
                style="width: 100%; height: 800px"
            >
            <GmapMarker
                :key="index"
                v-for="(marker, index) in markers"
                :position="marker"
                :clickable="true"
                :draggable="false"
                @click="removeMarker(index)"
            />
            </GmapMap>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data: function() {
            return {
                markers: [],
                center: {lat: 42.150527, lng: 24.746477},
                zoom: 15,
                map: 'roadmap'
            }
        },
        methods: {
            addMarker(event){
                axios.post('/location', {
                    userId: this.$store.state.auth.userId,
                    marker: event.latLng
                }).then(response => {
                    this.markers.push({ 'id': response.data.locations.id,
                                        'lat': response.data.locations.lat,
                                        'lng': response.data.locations.lng})
                }).catch((error) => console.log(error));
            },
            removeMarker(index){
                const markerId = this.markers[index].id
                this.markers.splice(index, 1);

                axios.post('/deleteLocation', {
                    userId: this.$store.state.auth.userId,
                    markerId: markerId
                })
            }
        },
        mounted(){
            axios.get('/location', {
                userId: 1
            }).then(response => {
                this.markers = response.data.locations
            }).catch((error) => console.log(error));
        }
    }
</script>

TLDR: 로컬 상태를 사용합니다.

전조:이 결정은 항상 까다로워질 수 있다.이 질문에 답하기 전에 UI를 상태 함수로서 생각해 보십시오. UI = F(state)느릅나무는 이렇게 만들어집니다.즉, 애플리케이션 전체의 현재 보기/UI를 결정할 때 일부 데이터 X가 중앙 저장소(Vuex/Redux)에 속해야 하며 데이터 자체가 독립적일 수 있습니다.

솔루션:이 경우, 다음과 같이 생각하십시오.markers. 데이터가 필요한가?markers정말 스스로 존재하는 걸까요?마커를 단독으로 사용할 수 있는 애플리케이션 전체의 UI 컴포넌트(문제의 3가지 컴포넌트 제외)가 있습니까?데이터인가markers그 자체로 완성될까요?아마 예, 아니오일 겁니다.더 좋다고 생각하는 경우 Vuex에 넣을 수 있습니다. 그렇지 않으면 로컬 구성 요소 상태를 사용할 수 있습니다.

좀 더 구체적으로 말하면markers3가지 기능이 결합되어 더욱 결속력 있는 유닛이 됩니다.따라서 마커를 데이터로 노출하는 대신 마커를 숨겨둔 세 가지 기능을 노출합니다.두 가지 방법이 있습니다.먼저 UI가 필요 없는 Vue 컴포넌트(간소화된 Vuex)를 3가지 기능으로 표시합니다.

또는 두 번째 접근법으로서 Vue.js는 이러한 유형의 문제에 대한 보다 나은 해결책인 의존성 주입을 통해 자녀가 상위 구성 요소의 데이터에 액세스할 수 있도록 할 수 있습니다. 이 경우 바로 필요한 것입니다.물론 찬반양론도 있지만 그건 다음 날 이야기다.

이 컴포넌트 「」를 할 수도 .「 」 、 「 。GmapMap,GmapMarker그리고 그들의 부모는 항상 함께 존재할 것이다. GmapMarker GmapMap그 상태를 로컬로 유지하는 것이 좋습니다.그런 다음 이러한 컴포넌트의 개별 재사용 가능한 모듈을 생성하여 NPM에 게시하고 다른 응용 프로그램에서 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/54228482/should-this-logic-be-placed-in-vuex-store-i-have-trouble-figuring-out-when-some