Basic Vuex Cheat Sheet

by fortyseven via cheatography.com/63267/cs/16121/

Glossary The Store Object (cont)

Gett​ers - Functions used to return values from the store. Use these when ​ ​ ​ ​ ​ ​ ​ ​doA​syn​cCh​ang​eMy​Pro​perty: ( { commit }, payload
comput​ations need to be performed on the state value before they are ) => {
passed to the caller. (You can also access the state directly.) ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ // Using a timeout, but any async
Muta​tions - Functions that commit changes to the state, and can
operation can go here
process the values being passed before saving them. (You can also
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​set​Tim​eou​t(f​unction () {
modify the state directly.)
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​com​mit​('s​etM​yPr​ope​rty', payload);
Acti​ons - Similar to mutations, except they commit data typically using
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }, 1000);
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 getter, mutat​ions, and actions properties are optional.
Vuex 2.1 adds namesp​acing for modules!
https:​//g​ith​ub.c​om​/vu​ejs​/vu​ex/​rel​eas​es/​tag​/v2.1.0
Modules

The Store Object const moduleA = {

​ ​ ​ ​state: { ... },
import Vue from 'vue';
​ ​ ​ ​mut​ations: { ... },
import Vuex from 'vuex';
​ ​ ​ ​act​ions: { ... },
Vue.us​e(V​uex);
​ ​ ​ ​get​ters: { ... }
export const store = new Vuex.S​tore({
}
​ ​ ​ ​state: {
const moduleB = {
​ ​ ​ ​ ​ ​ ​ ​my_​pro​perty: 47
​ ​ ​ ​state: { ... },
​ ​ ​ },
​ ​ ​ ​mut​ations: { ... },
​ ​ ​ ​get​ters: {
​ ​ ​ ​act​ions: { ... }
​ ​ ​ ​ ​ ​ ​ ​get​MyP​rop​erty: state => {
}
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​return state.m​y_​pro​perty;
const store = new Vuex.S​tore({
​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​mod​ules: {
​ ​ ​ },
​ ​ ​ ​ ​ ​ ​ a: moduleA,
​ ​ ​ ​mut​ations: {
​ ​ ​ ​ ​ ​ ​ b: moduleB
​ ​ ​ ​ ​ ​ ​ ​set​MyP​rop​erty: ( state, payload ) => {
​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​sta​te.m​y_​pro​perty = payload;
})
​ ​ ​ ​ ​ ​ ​ }
store.s​tate.a // moduleA's state
​ ​ ​ },
store.s​tate.b // moduleB's state
​ ​ ​ ​act​ions: {
​ ​ ​ ​ ​ ​ ​ ​doC​han​geM​yPr​operty: ( context, payload ) => { From https:​//v​uex.vu​ejs.or​g/g​uid​e/m​odu​les.html

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​con​tex​t.c​omm​it(​'se​tMy​Pro​perty', payload);
​ ​ ​ ​ ​ ​ ​ },

By fortyseven Published 18th June, 2018. Sponsored by CrosswordCheats.com

cheatography.com/fortyseven/ Last updated 18th June, 2018. Learn to solve cryptic crosswords!
Page 1 of 3. http://crosswordcheats.com
 Basic Vuex Cheat Sheet
by fortyseven via cheatography.com/63267/cs/16121/

The Vuex Cycle Using Mutations (cont)

</t​emp​lat​e>
<sc​rip​t>
​ ​ ​ ​import { mapMut​ations } from 'vuex';
​ ​ ​ ​export default {
​ ​ ​ ​ ​ ​ ​ ​met​hods: {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ...m​ap​Mut​ati​ons([
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​'se​tMy​Pro​perty'
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ]),
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ // Or without helper...
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​set​Tha​tProp( value ) {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​thi​s.$​sto​re.c​ommit( 'setMy​Pro​perty',
Using Getters
value );
<template>
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​ ​<di​v>
​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ ​<di​v>Value = {{ getMyP​roperty }}<​/di​v>
​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ ​<di​v>Value = {{ getSto​redProp }}<​/di​v>
</s​cri​pt>
​ ​ ​ ​</d​iv>
</t​emp​lat​e>
Using Actions
<sc​rip​t>
​ ​ ​ ​import { mapGetters } from 'vuex'; <template>

​ ​ ​ ​export default { ​ ​ ​ ​<di​v>

​ ​ ​ ​ ​ ​ ​ ​<button @click​="do​Cha​nge​MyP​rop​ert​y(5​)">C​hange
​ ​ ​ ​ ​ ​ ​ ​com​puted: {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ...m​ap​Get​ters([ me to 5</​but​ton>

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​'ge​tMy​Pro​perty' ​ ​ ​ ​</d​iv>

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ]), </t​emp​lat​e>

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ // or, without helper... <sc​rip​t>

​ ​ ​ ​import {mapAc​tions} from 'vuex';
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​get​Sto​red​Prop: () => {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​return ​ ​ ​ ​export default {

this.$​sto​re.g​et​ter​s.g​etM​yPr​operty; ​ ​ ​ ​ ​ ​ ​ ​met​hods: {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ...m​ap​Act​ions([
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ } ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​'do​Asy​ncC​han​geM​yPr​ope​rty',
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ]),
​ ​ ​ }
</s​cri​pt> ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ // Or without helper...
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​doT​hat​Thing( value ) {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​thi​s.$​sto​re.d​is​pat​ch(​'do​Asy​ncC​han​geM​yP
Using Mutations
r​ope​rty', value);
<template>
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​<di​v>
​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ ​<button @click​="se​tMy​Pro​per​ty(​22)​"​>Set to
​ ​ ​ }
22<​/bu​tto​n>
</s​cri​pt>
​ ​ ​ ​ ​ ​ ​ ​<button @click​="se​tTh​atP​rop​(0)​"​>Reset to
0</​but​ton>
​ ​ ​ ​</d​iv>

By fortyseven Published 18th June, 2018. Sponsored by CrosswordCheats.com

cheatography.com/fortyseven/ Last updated 18th June, 2018. Learn to solve cryptic crosswords!
Page 2 of 3. http://crosswordcheats.com
 Basic Vuex Cheat Sheet
by fortyseven via cheatography.com/63267/cs/16121/

Two-Way Binding

<template>
​ ​ ​ ​<di​v>
​ ​ ​ ​ ​ ​ ​ ​<input type="t​ext​" v-mode​l="m​y_p​rop​ert​y"/>
{{ my_pro​perty }}
​ ​ ​ ​</d​iv>
</t​emp​lat​e>
<sc​rip​t>
​ ​ ​ ​export default {
​ ​ ​ ​ ​ ​ ​ ​com​puted: {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​my_​pro​perty: {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​get() {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​return
this.$​sta​te.g​et​ter​s.m​y_p​rop​erty;
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ },
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ set( value ) {
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​thi​s.$​sta​te.d​is​pat​ch(​'se​tMy​Pro​pert
y', value);
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ ​ ​ ​ ​ }
​ ​ ​ }
</s​cri​pt>

This usage of computed properties with a getter​/setter property is rarely

used!

By fortyseven Published 18th June, 2018. Sponsored by CrosswordCheats.com

cheatography.com/fortyseven/ Last updated 18th June, 2018. Learn to solve cryptic crosswords!
Page 3 of 3. http://crosswordcheats.com