Full-Stack Web Development with Vue.js and Node

(singke) #1
Introducing Vuex Chapter 8

The preceding screenshot should print the default value of count in the HelloWorld.vue


component. If you navigate to http://localhost:8080/#/, you should see the following


screenshot:


In the preceding screenshot, we accessed the count variable in the store directly using the $


operator, which is not the preferred way of doing it. We have learned the fundamentals of


using the state. Now, the proper way to access the variables is by using getters.


Getters

A getter is a function that is used to access the objects from the store. Let's create a


getter method to fetch the count that we have in our store.


In store.js, add the following code:


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

Vue.use(Vuex)

const state = {
count: 0
}

const getters = {
fetchCount: state => state.count
}

export const store = new Vuex.Store({
state,
getters
})
Free download pdf