vuex-helpers

mapTwoWayState

Frequently, you'll need to both get and mutate Vuex state from a component. We can do this with a two way computed property.

export default {
    computed: {
        isLoading: {
            get() {
                return this.$store.state.namespace.isLoading;
            },
            set(value) {
                this.$store.commit('namespace/setIsLoading', value);
            },
        },
    },
}

To make this less verbose, use the mapTwoWayState helper. The namespace argument is optional.

import { mapTwoWayState } from 'vuex-helpers';

export default {
    computed: {
        ...mapTwoWayState('namespace', {
            isLoading: 'setIsLoading',
        }),
    },
}

In the above example, your Vuex state will be exposed as isLoading. When you modify this, the namespace/setIsLoading mutation will be called. If you need to use a name that does not match your key in Vuex, use the object syntax.

thingIsLoading: { key: 'isLoading', mutation: 'setIsLoading' }