What are the usage scenarios and attributes of vuex?

Use scenarios of vuex: 1. User’s personal information management module; 2. Shopping cart module for e-commerce projects; 3. My order module; 4. On the order settlement page. The vuex attributes are: 1. state, used to store variables; 2. getters; 3. mutations; 4. actions; 5. modules.

The operating environment of this tutorial: windows7 system, vue2.9.6&&vuex4.0.2 version, DELL G3 computer.

What is vuex?

vuex is a plug-in used to manage communication between components. It is a state management model specially developed for [vue.js] applications. It solves the problem of sharing the same state between components. question, it's better able to manage state outside the component.

Why do you need vuex?

When multiple components depend on the same state, the method of passing parameters becomes more complicated due to the nesting between multiple layers of components. In addition, if parent-child components are used to drink directly or through events, Polyphenol copies of changing and synchronized state make the pattern brittle and make the code unmaintainable.

When and under what circumstances should I use vuex?

When building a medium-to-large single-page application, you need to consider how to better manage state outside the component.

Note: If you are not developing a large single-page application, using vuex may be cumbersome and redundant. That is, a project that can be developed quickly will end up being complicated after using vuex. Generally, a simple store mode will suffice.

The five major attributes of vuex

state, getters, mutations, actions, modules.

1. state: basic data of vuex, used to store variables

2. geeter: data derived from basic data (state), equivalent to the calculated attributes of state

3. Mutation: The method to submit updated data must be synchronous (if you need to use action asynchronously). Each mutation has a string event type (type) and a callback function (handler).

The callback function is where we actually change the state, and it will accept state as the first parameter and submit the payload as the second parameter.

4. Action: The function is roughly the same as mutation. The difference is ==》1. Action submits mutation instead of directly changing the state. 2. Action can contain any asynchronous operation.

5. Modules: Modular vuex allows each module to have its own state, mutation, action, and getters, making the structure very clear and easy to manage.

Vuex usage scenarios:

• User’s personal information management module;

• E-commerce The shopping cart module of the project calls the interface to obtain the shopping cart quantity every time (prerequisite). The effect is achieved, but every HTTP request consumes browser performance. In contrast, using vuex mutations to trigger is more advantageous;

• In my order module and order list, click Cancel Order, and then update the corresponding order list. In this case Also use Vuex, state to store a state, monitor this state, and update the corresponding list when it changes;

• From the order settlement page, enter the coupon selection page and select the coupon page. How to save selected coupon information? The state saves the coupon information. When selecting a coupon, mutations are submitted. On the order settlement page, the selected coupon is obtained and the order discount information is updated;

Related recommendations: " vue.js tutorial》

The above is the detailed content of What are the usage scenarios and attributes of vuex?. For more information, please follow other related articles on the PHP Chinese website!