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

Question

假设我的 Vuex.Store 有一个 getter 那个 returns 一个具有许多属性的对象，我想在一个组件中使用这个对象。有没有办法做类似的事情：

<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 其中 returns 嵌套对象。

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>

如果您真的想创建一个新的 scope，请定义一个新组件，该组件将只定义您希望它使用的模板部分。

可以使用简单的 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>

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

Using nested properties from object in Vuex store inside a template

javascript

vue.js

vuejs2

vue-component

vuex