Caching the Current Folder Structure Using Vuex Chapter 6
getters: {
message: state => {
return state.message.toLowerCase();
}
},
mutations: {
updateMessage(state, msg) {
state.message = msg;
}
}
});
The preceding store example includes the state object, which is our raw data store; a
getters object, which includes our processing of the state; and finally, a mutations
object, which allows us to update the message. Notice how both the message getter and
the updateMessage mutation have the store's state as the first parameter.
To use this store, you could do the following:
new Vue({
el: '#app',
store,
computed: {
message() {
return this.$store.state.message
},
formatted() {
return this.$store.getters.message
}
}
});
Retrieving the message
In the {{ message }} computed function, we have retrieved the raw, unprocessed
message from the state object and used the following path:
this.$store.state.message