State | vuex create
SingleStateTreeVuexusesasinglestatetree-thatis,thissingleobjectcontainsallyourapplicationlevelstateandservesasthe"singlesourceoftruth."Thisalsomeansusuallyyouwillhaveonlyonestoreforeachapplication.Asinglestatetreemakesitstraightforwardtolocateaspecificpieceofstate,andallowsustoeasilytakesnapshotsofthecurrentappstatefordebuggingpurposes.Thesinglestatetreedoesnotconflictwithmodularity-inlaterchapterswewilldiscusshowtosplityourstateandmutationsintosubmodules.ThedatayoustoreinVuexfollowsthesamer...
Single State TreeVuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth." This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.
The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules.
The data you store in Vuex follows the same rules as the data in a Vue instance, ie the state object must be plain. See also: Vue#data[1].
Getting Vuex State into Vue ComponentsSo how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to "retrieve" state from it is simply returning some store state from within a computed property[2]:
const Counter = { tem...