Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
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
Free download pdf