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

Caching the Current Folder Structure Using Vuex Chapter 6

This is literally accessing the store, then the state object, followed by the message object

key.

In a similar vein, the {{ formatted }} computed value uses the getter from the store,

which lowercases the string. This is retrieved by accessing the getters object instead:

this.$store.getters.message

Updating the message

To update the message, you need to call the commit function. This accepts the method

name as the first parameter with the payload, or data, being the second. The payload can be

either a simple variable, an array, or an object if several variables need to be passed.

The updateMessage mutation in the store accepts a single parameter and sets the

message to equal that, so to update our message the code would be:

store.commit('updateMessage', 'VUEX Store');

This can be run anywhere in the app and will automatically update the previous values
used, as they all rely on the same store.

Returning our message getter now would return VUEX Store, as we've updated the state.
With that in mind, let's update our app to use a path variable in the store, rather than the

Vue instance.

Using the Vuex store for the folder path

The first step in using the Vue store for our global Dropbox path variable is to move the

data object from the Vue instance to the Store, and rename it to state:

const store = new Vuex.Store({

state: {

path: ''

}

});