Understanding the core concepts of Vuex
It is now time to introduce the Vuex architecture, which consists of five core concepts:
- Single state tree
- Getters
- Mutations
- Actions
- Modules
Each concept will be discussed in detail, with some pieces of code that will help to make it clear. Once you have read the following pages, you will have a clear understanding of Vuex architecture.
Understanding the Vuex store
Vuex implements Flux stores using a single state tree. In this, it differs from Flux because in Flux there could be more than one store. You may think that a single store/state is not good for modularity. Later, we will see how to split the single state tree into modules.
Having only one store has some benefits:
- It is available in every component
- It is easier to debug since all the application state is there
- You can write unobstructive plugins that watch the state and perform an action, such as persisting the state for later retrieval
The single state tree contains all the application-level data—it represents...
