Full-Stack Web Development with Vue.js and Node

Introducing Vuex Chapter 8

In the preceding code, we added a method called fetchCount, which returns the current

value of count. Now, to access this in our vue component—HelloWorld.vue, we will

need to update the content with the following code:

<template>

<div class="hello">

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

</div>

</template>

<script>

import { mapGetters } from 'vuex'

export default {

name: 'HelloWorld',

computed: mapGetters([

'fetchCount'

])

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

We have to import a module called mapGetters from Vuex, which is used to import the

fetchCount method that we create as a getter method in store.js. Now, check the

number by reloading the browser; this should also print the count as 0 :