What is Vuex?
VueX is a state management architecture specially designed for applications, which uniformly manages and maintains the variable state of each vue component (you can understand it as some data in vue components).
vuex can be understood as a development model or framework. For example, PHP has thinkphp, Java has spring, etc.
Centrally manage changes in driver components through state (data source) (such as spring's IOC container centrally managing beans).
Vuex has five core concepts.state, getters, mutations, actions, modules。
Application-level states are concentrated in the store; the way to change the state is to submit mutations, which is a synchronous thing; asynchronous logic should be encapsulated in action.
Cuex borrows from Flux, Redux, and The Elm Architecture. Unlike other modes, Vuex is a state management library specially designed for utilizing the fine-grained data response mechanism for efficient state updates.
Status Management: A simple understanding is to uniformly manage and maintain the variable state of each vue component (you can understand it as some data in vue component)
5 properties of Vuex
-
state: A single state tree, using one object contains all application hierarchical states.
-
getters: Just like a computed property, the return value of getter is cached according to its dependencies, and will be recalculated only when its dependencies change.
-
mutations: Each mutation has a string event type (type) and a callback function (handler).
-
action:action is similar to mutation, the difference is that: action submits mutation, rather than directly changing the state; action can contain any asynchronous operations.
-
modules: Modular vuex, each module has its own state, mutation, action, getter, and even nested submodules.
What is the State feature of vuex?
1. Vuex is a warehouse where many objects are placed in the warehouse. where state is the data source storage place, corresponding to the data in general Vue objects.
2. The data stored in the state is responsive. The Vue component reads data from the store. If the data in the store changes, the components that rely on this data will also be updated.
3. It maps the global state and getters to the computed computed properties of the current component through mapState.
What is the Getter feature of vuex?
1. Getters can perform calculation operations on State, which is the calculation attribute of the Store.
2. Although computational properties can also be made in components, getters can be reused between multiple components.
3. If a state is only used in one component, you can do not use getters
What is the mauation feature of vuex?
1. Mutation is a method that contains multiple methods (callback functions) that directly update state
2. Only synchronous code can be included, asynchronous code cannot be written
What is the action feature of vuex?
1. Action is similar to mutation, the difference is:
2. Action submits mutation, rather than changing the state directly.
3. Action can include any asynchronous operations
Under what circumstances should Vuex be used?
While Vuex can help us manage shared state, it also comes with more concepts and frameworks. This requires a trade-off between short-term and long-term benefits.
Using Vuex can be tedious and redundant if you don't plan to develop large single-page applications. It's true - if your application is simple enough, you'd better not use Vuex. A simple global event bus is enough for you to need. However, if you need to build a medium-to-large single page application, you will most likely consider how to better manage state outside of components, and Vuex will be a natural choice.
Summarize
That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!