Before learning how to use a Vuex store in Nuxt apps, we should understand how it works in standard Vue apps. But what is Vuex? Let's find out in the upcoming section.
What is Vuex?
In a nutshell, Vuex is a centralized data (also referred as state) management system with some rules (which we will look into later) to ensure that the state can only be mutated predictably from multiple (distant) components that need to access the common data. This idea of information centralization is common with tools such as Redux in React. They all share a similar state management pattern with Vuex. Let's take a look at what this pattern is in the next section.
State management pattern
To understand the state management pattern in Vuex, let's take a look at a simple Vue app that we are already familiar with:
<div id="app"></div>
new Vue({
// state
data () {
return { message: '' }
},
// view
template: `
<div...
