CODEWITHSUNDEEP
vue.jsvuex
Philipp Mochine
Philipp Mochine

Reputation: 4705

Best practice for Vuex Helpers

My mixin to get the Vuex Helpers looks like this:

import { createNamespacedHelpers } from 'vuex';
const { mapGetters, mapActions } = createNamespacedHelpers('displayfood');

export default {
    computed:{
        ...mapGetters([
            'food',
            ( ... )
        ]),
    },
    methods:{
        ...mapActions([
            'fetchFood',
             ( ... )
        ]),
    }
}

I have got a big component with about ~12 components (including nested). For every child component that needs the data I need to call:

import displayFood from '@js/mixins/displayFood';

export default { mixins:[displayFood] }

Is there another way without writing all the time import & mixins? (Besides Global Mixin)

Upvotes: 0

Views: 546

Answers (1)

Christophe
Christophe

Reputation: 192

Nope, mixins will be defined either locally or globally.

Or you could keep the getters and actions only in your top-level component, and then pass it down to the children. That will make your children more reusable, easier to test and the whole components tree easier to refactor.

Each time you reach out from a component to external data (your vuex store) instead of using props and events, that couples each component to the data store.

Upvotes: 1

Related Questions