Detailed explanation of the properties and functions of Vuex

What is Vuex?

VueX is a state management framework designed specifically for Vue.js applications, which uniformly manages and maintains the mutable states of various vue components (you can understand it as some data in the vue component).

Vuex can be understood as a development mode or framework. For example, PHP has thinkphp, Java has spring, and so on.

Centrally manage changes in driver components through state (data source) (just like Spring's IOC container centrally manages beans).

Vuex has five core concepts: state, getters , mutations , actions , and modules .

Application-level state is centralized in the store; the way to change the state is to submit mutations, which is a synchronous thing; asynchronous logic should be encapsulated in actions.

Cuex draws on Flux, Redux, and The Elm Architecture. Unlike other modes, Vuex is a state management library designed specifically for Vue.js to utilize Vue.js's fine-grained data response mechanism for efficient state updates.

State management : Simply put, it is to uniformly manage and maintain the changeable states of each vue component (you can understand it as some data in the vue component)

Five properties of Vuex

• state : A single state tree that contains all application-level states in one object.
  
• getters : Just like computed properties, the return value of a getter is cached based on its dependencies and is only recomputed when its dependencies change.
  
• mutations : Each mutation has a string event type (type) and a callback function (handler).
  
• action : action is similar to mutation, but the difference is that action submits mutation instead of directly changing the state; action can contain any asynchronous operation.
  
• modules : Modular vuex, each module has its own state, mutation, action, getter, and even nested sub-modules.

What is the State property of vuex?

1. Vuex is a warehouse, which contains many objects. The state is where the data source is stored, corresponding to the data in the general Vue object.

2. The data stored in the state is responsive. Vue components read data from the store. If the data in the store changes, the components that depend on this data will also be updated.

3. It maps the global state and getters to the computed properties of the current component through mapState.

What is the Getter feature of vuex?

1. Getters can perform calculations on State, which is the calculated property of Store

2. Although you can also calculate properties within a component, getters can be reused between multiple components

3. If a state is only used in one component, getters are not required.

What is the mauation feature of vuex?

1. A mutation is an object that contains multiple methods (callback functions) that directly update the state.

2. Only synchronous code can be included, and asynchronous code cannot be written

What is the action feature of vuex?

1. Action is similar to mutation, but the difference is:

2. Action submits a mutation instead of directly changing the state.

3. Action can contain any asynchronous operation

When should I use Vuex?

Although Vuex can help us manage shared states, it also comes with more concepts and frameworks. This requires weighing short-term and long-term benefits.

If you don't plan to develop a large single-page application, using Vuex may be cumbersome and redundant. It's true - if your app is simple enough, you're probably better off not using Vuex. A simple global event bus is all you need. However, if you need to build a medium to large single-page application, you will most likely consider how to better manage the state outside the component, and Vuex will become a natural choice.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!