Shulou(Shulou.com)06/02 Report--

This article shares with you the content of a sample analysis of the properties and functions of Vuex. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

What is Vuex?

VueX is a state management architecture specially designed for Vue.js applications, which uniformly manages and maintains the changeable state of each vue component (you can understand it as some data in the vue component).

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

Centrally manage changes to the driver components through state (data source) (just like spring's IOC container centrally manages bean).

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

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

Cuex borrows from Flux, Redux, and The Elm Architecture. Unlike other patterns, Vuex is a state management library specially designed for Vue.js to take advantage of Vue.js 's fine-grained data response mechanism for efficient state updates.

State management: simple understanding is to uniformly manage and maintain the changeable state of each vue component (you can understand it as some data in the vue component)

Five attributes of Vuex

State: a single state tree that contains all the application-level states in a single object.

Getters: just like a computed property, the return value of getter is cached based on its dependency and is recalculated only if its dependency value changes.

Mutations: each mutation has an event type of a string (type) and a callback function (handler).

Action:action is similar to mutation, except that action submits a mutation rather than directly changing state; action can contain any asynchronous operation.

Modules: modular vuex, with each module having its own state, mutation, action, getter, or even nested submodules.

What is the State feature of vuex?

1. Vuex is a warehouse with a lot of objects in it. Where state is the place where the data source is stored, corresponding to the data in the general Vue object.

2. The data stored in the state is responsive. The Vue component reads the data from the store. If the data in the store changes, the components that rely on this data will be updated.

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

What is the Getter feature of vuex?

1. Getters can calculate State, which is the computing attribute of Store.

2. Although computing properties can also be made within components, getters can be reused among multiple components

3. If a state is only used in one component, you can use getters.

What is the mauation feature of vuex?

1. Mutation is an object that contains multiple methods to update state directly (callback function).

2. Can only contain synchronous code, not write asynchronous code

What is the action feature of vuex?

1. Action is similar to mutation, except that:

2. Action submits the mutation instead of directly changing the status.

3. Action can contain any asynchronous operation

Under what circumstances should I use Vuex?

While Vuex can help us manage shared state, it also comes with more concepts and frameworks. This requires a tradeoff between short-term and long-term benefits.

If you don't plan to develop large single-page applications, using Vuex may be tedious and redundant. That's true-if your application is simple enough, you'd better not use Vuex. A simple global event bus is enough for you. However, if you need to build a medium-to-large single-page application, you are likely to consider how to better manage state outside the component, and Vuex will be a natural choice.

Thank you for reading! This is the end of this article on "sample Analysis of Vuex attributes and functions". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.