Vuex Cheatsheet

---
title: Vuex Cheatsheet
subtitle: Vuex Cheatsheet
author: Jon LaBelle
date: February 24, 2022
source: https://cheatography.com/fortyseven/cheat-sheets/basic-vuex/
snippet: https://jonlabelle.com/snippets/view/markdown/vuex-cheatsheet
notoc: false
---

## Glossary

- **Getters** - Functions used to return values from the store. Use when
  computations need to be performed on the state value before they are passed to
  the caller. (You can also access the state directly.)
- **Mutations** - Functions that commit changes to the state, and can process
  the values being passed before saving them. (You can also modify the state
  directly.)
- **Actions** - Similar to mutations, except they commit data typically using
  during asynchronous 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 information!

<https://vuex.vuejs.org/guide/>

## Using Getters

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

## The Store Object

```js
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, mutations, and actions properties are optional.

## Using Mutations

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

## Modules

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

> From <https://vuex.vuejs.org/guide/modules.html>

## Using Actions

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

```html
<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!_