Tag: Vuex Cheat Sheet

<template>
    <div>
        <button @click="doChangeMyProperty(5)">Change me to 5</button>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    export default {
        methods: {
            ...mapActions([
                'doAsyncChangeMyProperty',
            ]),
            // Or without helper...
            doThatThing( value ) {
                this.$store.dispatch('doAsyncChangeMyProperty', value);
            }
        }
    }
</script>

Dispatch

Dispatch can also take a payload as a second argument.

this.$store.dispatch('counter/getCountFromApi');

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
export const store = new Vuex.Store({
    state: {
        my_property: 47
    },
    getters: {
        getMyProperty: state => {
            return state.my_property;
        }
    },
    mutations: {
        setMyProperty: ( state, payload ) => {
            state.my_property = payload;
        }
    },
    actions: {
        doChangeMyProperty: ( context, payload ) => {
            context.commit('setMyProperty', payload);
        },
        doAsyncChangeMyProperty: ( { commit }, payload ) => {
            // Using a timeout, but any async operation can go here
            setTimeout(function () {
                commit('setMyProperty', payload);
            }, 1000);
        }
    }
});

The only way to change state is through a mutation. Mutations are synchronous.

Mutation functions in the Store receive positional arguments:

• state – Current local state
• payload – Optional payload is whatever (if anything) is passed to commit()‘s second argument.

To dispatch actions or commit mutations in the global namespace, pass { root: true } as the 3rd argument to dispatch and commit.

Mutation functions edit state directly.

mutations: {
  increment(state) {
    state.count++;
  },
},

Commit a Mutation

To invoke a mutation, use the commit() function.

this.$store.commit('counter/increment');

// With a payload of 22
this.$store.commit('counter/setNewValue', 22);

Retrieve computed derived state based on the store. Getter functions receive the following positional arguments:

<template>
     <div>
        <div>Value = {{ getMyProperty }}</div>
        <div>Value = {{ getStoredProp }}</div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters([
                'getMyProperty'
            ]),
            // or, without helper...
            getStoredProp: () => {
                  return this.$store.getters.getMyProperty;
            }
        }
    }
</script>

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})

store.state.a // moduleA's state
store.state.b // moduleB's state