Using nested properties from object in Vuex store inside a template

Question

Assuming that I have a getter for my Vuex.Store that returns an object with many properties and I want to use this object in a component. Is there any way to do something similar to this:

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

instead of:

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

Answer 1

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

The simple answer is no.

You could define a computed property which returns the nested object.

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

In fact, this is where mapGetters is meant to be used.

import { mapGetters } from 'vuex';

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

Then, the template would simply be

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

If you really want to make a new scope, define a new component which will only define the section of the template you want it to use.

A simple prop could be used, so it doesn't need to know about the store.

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

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

Then, in the parent:

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