Briefly describe the functions and usage of vuex

1. Introduction to vuex

Vuex is a state management architecture specially designed for vue.js applications . Its role is to put all the states in the application together, and centralize the management and maintenance of the variable state of the components
Vuex has five core concepts state, getters, muntations, action, modules
The basic idea behind Vuex is borrowed from Flux (opens new window), Redux (opens new window) and The Elm Architecture (opens new window). Different from other modes, Vuex is a state management library specially designed for Vue.js to use Vue.js' fine-grained data response mechanism for efficient state updates.
Vuex's state store is reactive
The state in the store cannot be changed directly

It is not recommended for small projects, because it may be cumbersome to use vuex for small projects
Medium and large single-page applications, because it is necessary to consider how to better manage the external state of components

insert image description here

The return value of the getter will be cached according to its dependencies, and will only be recalculated when the value of its dependencies changes
In simple terms, getters store some public functions for components to call
Accessing Getters via properties is exposed as a store.getters object, and you can access these values as properties:

Mutation must be a synchronous function
The only way to change the state in Vuex's store is to commit a mutation (this.$store.commit('xxx') commits a mutation)
Additional parameters can be passed to commit, namely the payload of the mutation.

Action is similar to mutation, the difference is: Action submits mutation instead of directly changing state. Action can contain arbitrary asynchronous operations.
The methods in the Actions object need to be called using store.dispatch
The first parameter of Actions is context, which exposes the same set of methods as the store instance, so you can call context.commit to submit a mutation, or get state and getters through context.state and context.getters.

Due to the use of a single state tree, all the state of the application will be concentrated into a relatively large object. When the application becomes very complex, the store object can become quite bloated. In order to solve the above problems, Vuex allows us to split the store into modules (module) Vuex allows us to split the store into modules (module). Each module has its own state, mutation, action, getter, and even nested submodules

Application-level state should be centralized into a single store object.

Committing mutations is the only way to change state, and this process is synchronous.

Asynchronous logic should be encapsulated in action.

insert image description here