Question

当前，我将Vuex存储用于我的身份验证逻辑，并且我理解为什么能够从应用程序中的任何位置访问用户令牌，用户ID和用户名之类的东西非常有用。我100％确定身份验证逻辑属于商店。

但是，我目前正在使用google地图，并制作了一个组件，其中包含google地图和3个用于在地图上显示，添加和删除google标记的功能。现在我不知道是否应该将此逻辑移至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>

Answer 1

TLDR：使用本地状态。

前体：这个决定总是很棘手。在尝试回答此问题之前，请考虑将UI作为状态的函数，即UI = F(state)。这就是榆木的建造方式。这意味着某些数据 X 在确定整个应用程序的当前视图/ UI且数据本身可以独立存在时，应该成为中央存储（Vuex / Redux）的一部分。 / p>

解决方案： 在这种情况下，请考虑markers。数据markers是否应该真正独立存在？整个应用程序中是否有一些UI组件（除了上述三个组件之外）可以独立使用标记？数据markers本身是否完整？可能是或否。如果您认为更多是，则可以将其放入Vuex内，否则使用本地组件状态。

更具体地说，markers与三个功能一起构成了一个更紧密的单元。因此，与其公开标记作为数据，不如公开三个保持标记隐藏的功能。有两种方法可以执行此操作。首先，创建一个具有三个UI功能的无UI Vue组件（简化的Vuex）。

或者作为第二种方法，Vue.js为此类问题提供了更好的解决方案-Dependency injection通过依赖注入，您可以允许子级访问祖先组件的数据，而这正是您所需要的案件。当然，它也有其优点和缺点，但这是另一天的话题。

注意：或者，您也可以认为这三个组件GmapMap，GmapMarker及其父级将始终存在在一起。如果没有GmapMarker，GmapMap本身就没有意义，因此最好将该状态保留在本地。然后，您可以创建这些组件的单独的可重用模块，发布到NPM并在其他应用程序中使用。

是否应将此逻辑放在Vuex商店中？我很难弄清楚什么时候应该存储或处于本地组件状态

1 个答案: