Utilizing the store

To help us get to grips with how to use the store, let's move the path variable that is currently stored on the parent Vue instance. Before we start writing and moving code, there are a few phrases and words that are different when using the Vuex store and we should familiarize ourselves with them:

• state: This is the store's equivalent of the data object; the raw data is stored within this object.
• getters: These are the Vuex equivalent of computed values; the function of the store that may process the raw state value before returning it for use in a component.
• mutations: Vuex doesn't allow modification of the state object directly outside of the store and this must be done via a mutation handler; these are functions on the store that then allow the state to be updated. They always take state as the first parameter.

These objects belong directly in the store. Updating the store, however, is not as simple as calling store.mutationName(). Instead, we must call the method by...