javascript - 在模板内使用 Vuex 存储中对象的嵌套属性

Question

假设我的 Vuex.Store 有一个 getter，它返回一个具有许多属性的对象，并且我想在组件中使用该对象。有没有办法做类似的事情:

<div v-bind="$store.getters['x/y']">
   <p>{{scopedObject.prop1}}</p>
</div>

而不是:

<div>
   <p>{{$store.state.x.data.y.prop1}}</p>
</div>

Answer 1

I'm asking if I can scope objects to blocks.

简单的答案是不。

您可以定义 computed property它返回嵌套对象。

computed: {
    scopedObject() {
        return this.$store.getters['x/y'];
    }
}

事实上，这就是 mapGetters 的地方是用来使用的。

import { mapGetters } from 'vuex';

export default {
    computed: mapGetters({ scopedObject: 'x/y' }),
}

然后，模板就简单了

<div>
   <p>{{scopedObject.prop1}}</p>
</div>

如果您确实想创建一个新的范围，请定义一个新组件，该组件将仅定义您希望其使用的模板部分。

可以使用一个简单的prop，因此它不需要了解商店。

<template>
    <div>
        <p>{{scopedObject.prop1}}</p>
    </div>
</template>

<script>
    export default {
        props: {
            scopedObject: {
                type: Object,
                required: true
            },
        },
    };
</script>

然后，在父级中:

<template>
    <scoped-component :scoped-object="$store.getters['x/y']"><scoped-component>
</template>