Working with State

At the lowest level in a Vuex store, you will find the actual data (the state) that Vuex manages. All components have access to the state via a special $store variable. While there's more within this variable, to read the state, you can use $store.state.someStateValue. So, for example: Hello, my name is {{ $store.state.name }} would output the name value from your Vuex store in a component. For simple operations reading from the store, that's all you need.

We will now learn how to display state values in the following exercise.

Exercise 9.01: Displaying State Values

In this exercise, you will create an empty Vue application using Vuex. The previous section described how that was done via the CLI, and if you followed along, you've got one ready to go. If not, go ahead and create one now, ensuring you enable Vuex. In this exercise, we'll simply set a few values in the state and display them in a component.

To access the code files...