Vuex Cheatsheet

#vue

#vuejs

#vue.js

#vuex

#cheatsheet

Vuex is a state management pattern + library for Vue.js applications.

Creating Store

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

Vue.use(Vuex)

// state
const state = { count: 0 }

// types
const types = {
 INCREMENT: 'INCREMENT',
 DECREMENT: 'DECREMENT',
 RESET: 'RESET',
}

// Mutations
const mutations = {
 [types.INCREMENT]({ count }) {
 count += 1
 },
 [types.DECREMENT]({ count }) {
 count += -1
 },
 [types.RESET]({ count }) {
 count = 0
 },
}

// Actions
const actions = {
 increment({ commit }) {
 commit(types.INCREMENT)
 },
 decrement({ commit }) {
 commit(types.DECREMENT)
 },
 reset({ commit }) {
 commit(types.RESET)
 },
}

// Getters
const getters = {
 isEven({ count }) {
 return count % 2 === 0
 },
}

const store = new Vuex.Store({
 state,
 mutations,
 actions,
 getters,
})

Include store into the App

import Vue from 'vue'
import store from './store'
import App from './App.vue'

new Vuew({
 el: '#app',
 store,
 render: h => h(App),
})

Using in .Vue Templates

<template>
 <div id="app">
 <section class="hero">
 <h1 class="title">{{ "{{ count " }}}}</h1>
 <h2 v-if="isEven">Is even!!</h1>
 </section>
 <section>
 <button class="button" @click="increment">+</button>
 <button class="button" @click="decrement">-</button>
 <button class="button" @click="reset">Reset</button>
 </section>
 </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import store from './store'

export default {
 name: 'app',
 computed: {
 ...mapState(['count']),
 ...mapGetters(['isEven']),
 },
 methods: {
 ...mapActions([
 'increment', 'decrement', 'reset',
 ]),
 },
}
</script>