Show Menu

Basic Vuex Cheat Sheet by

js     webdev     state     vue     vuejs     vuex

Glossary

Gett­ers - Functions used to return values from the store. Use these when comput­ations need to be performed on the state value before they are passed to the caller. (You can also access the state directly.)

Muta­tions - Functions that commit changes to the state, and can process the values being passed before saving them. (You can also modify the state directly.)

Acti­ons - Similar to mutations, except they commit data typically using during asynch­ronous tasks. They're optional, but you should get into the habit of using these whenever mutations are present.

Vuex provides many more features outside of the scope of this quick reference. Consult the manual for more inform­ation!

https:­//v­uex.vu­ejs.or­g/g­uide/

The Store Object

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 getter, mutat­ions, and actions properties are optional.

Modules

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

The Vuex Cycle

 

Using Getters

<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>

Using Mutations

<template>
    <div>
        <button @click="setMyProperty(22)">Set to 22</button>
        <button @click="setThatProp(0)">Reset to 0</button>
    </div>
</template>

<script>
    import { mapMutations } from 'vuex';
    export default {
        methods: {
            ...mapMutations([
                'setMyProperty'
            ]),
            // Or without helper...
            setThatProp( value ) {
                this.$store.commit( 'setMyProperty', value );
            }
        }
    }
</script>

Using Actions

<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>

Two-Way Binding

<template>
    <div>
        <input type="text" v-model="my_property"/>
        {{ my_property }}
    </div>
</template>

<script>
    export default {
        computed: {
            my_property: {
                get() {
                    return this.$state.getters.my_property;
                },
                set( value ) {
                    this.$state.dispatch('setMyProperty', value);
                }
            }
        }
    }
</script>
This usage of computed properties with a getter­/setter property is rarely used!

Download the Basic Vuex Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/fortyseven_basic-vuex.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          JavaScript Cheat Sheet
          jasmine JS testing Cheat Sheet