Должна ли эта логика быть размещена в магазине Vuex? У меня проблемы с выяснением, когда что-то должно быть в магазине или в состоянии локального компонента

Question

В настоящее время я использую хранилище Vuex для своей логики аутентификации, и я понимаю, почему возможность доступа к таким элементам, как токен пользователя, идентификатор пользователя и имя пользователя из любой точки моего приложения, чрезвычайно полезна. Я на 100% уверен, что логика аутентификации принадлежит магазину.

Однако в настоящее время я играю с картами Google и создал компонент, в котором есть карта Google и 3 функции для отображения, добавления и удаления маркеров Google с карты. Теперь я не могу понять, стоит ли мне перенести эту логику в магазин Vuex. Я думаю, что в будущем мне, возможно, придется использовать то, что находится внутри свойства markers: [] в некоторых других компонентах, но все остальное кажется, что оно не будет использоваться ни в каких других компонентах.

Один из плюсов использования хранилища 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>

Answer 1

TLDR: использовать локальное состояние.

Предшественник: Это решение всегда может быть хитрым. Прежде чем пытаться ответить на этот вопрос, подумайте об интерфейсе пользователя как о функции состояния, т.е. UI = F(state). Так построен Элм. Это означает, что некоторые данные X должны быть частью вашего центрального хранилища (Vuex / Redux), когда они определяют текущее представление / пользовательский интерфейс вашего общего приложения, а сами данные могут стоять самостоятельно.

Решение: В этом случае подумайте о markers. Должны ли данные markers существовать сами по себе? Есть ли какой-либо компонент пользовательского интерфейса (помимо трех рассматриваемых компонентов) всего вашего приложения, который может самостоятельно использовать маркер? Являются ли данные markers полными сами по себе? Вероятно, да или нет. Если вы считаете больше как да , то вы можете поместить его в Vuex, в противном случае используйте состояние локального компонента.

Чтобы быть более точным, markers вместе с тремя функциями делают единое целое. Таким образом, вместо того, чтобы выставлять маркеры как данные, предоставьте три функции, скрывающие маркеры. Есть два способа сделать это. Во-первых, создайте один компонент Vue без UI (упрощенный Vuex), в котором доступны три функции.

Или, как второй подход, Vue.js предоставил лучшее решение именно для этого типа проблемы - Внедрение зависимостей С помощью внедрения зависимостей вы можете разрешить детям получать доступ к данным компонента-предка, который является именно тем, что вы нужно в этом случае. Конечно, у него есть свои плюсы и минусы, но это тема другого дня.

Примечание: Альтернативно, вы также можете думать, что эти три компонента GmapMap, GmapMarker и их родитель всегда будут существовать вместе. GmapMarker само по себе не имеет смысла без GmapMap, поэтому лучше сохранять это состояние локально. Затем вы можете создать отдельный повторно используемый модуль из этих компонентов, опубликовать его в NPM и использовать его в других приложениях.