Caching the Current Folder Structure Using Vuex Chapter 6let hash = window.location.hash.substring(1);
this.path = (hash || '');
}
},
created() {
this.updateHash()
}
});With the store variable added, we can now access the store in our components using the
this.$store variable.
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 using a new
commit() function. This function accepts two parameters: the name of the mutation and
the data being passed to it.
Although initially difficult to understand, the verbose nature of the Vuex store allows for
powerful capabilities. An example of the store in action, adapting the original example
from Chapter 1, Getting Started with Vue.js, is as follows:
const store = new Vuex.Store({
state: {
message: 'HelLO Vue!'
},