Applying Getters

In the previous exercise, you saw how simple it was to directly access state, but there are times when you may need more complex views of your state. To make this easier, Vuex supports a feature called getters.

Getters have their own block within the store, and you can define as many as necessary. Each getter is passed the state as an argument, which lets you use whatever you need to create your value. Finally, the name of the getter is how it will be exposed. Consider this simple example:

state: {
  name: "Raymond",
  gender: "male",
  job: "Developer Evangelist"
},
getters: {
  bio(state) {
    return `My name is ${state.name}. I'm a ${state.job}`;
  } 
}

This store defines three state values (name, gender, and job), and also provides a "virtual" property named bio that returns a description of the data. Note that the getter only uses two of...