Full-Stack Web Development with Vue.js and Node

Introducing Vuex Chapter 8

Vue.use(Vuex)

const state = {

count: 0

}

const getters = {

fetchCount: state => state.count

}

const mutations = {

increment: state => state.count++,

decrement: state => state.count--

}

const actions = {

increment: ({ commit }) => commit('increment'),

decrement: ({ commit }) => commit('decrement')

}

export const store = new Vuex.Store({

state,

getters,

mutations,

actions

})

In the preceding code, we added two different functions for incrementing and
decrementing. Since these methods commit the mutations, we will need to pass a

parameter to make the commit method available.

Now we need to use the previously defined actions and make them available in our vue

component, in HelloWorld.vue:

<template>

<div class="hello">

<h1>The count is: {{ fetchCount }}</h1>

</div>

</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {

name: 'HelloWorld',

computed: mapGetters([

'fetchCount'

]),