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

This article introduces the relevant knowledge of "what are the usage scenarios and attributes of vuex". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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 the communication between components. It is a state management mode developed for [vue.js] applications. It solves the problem of sharing the same state between components, and it can better manage the state outside the components.

Why do I need vuex?

When multiple components depend on the same state, the method of passing parameters becomes more complex due to the nesting of multi-tier components, and if you use parent-child components to drink directly or change and synchronize polyphenol copies of the state through events, it makes the pattern fragile and unable to maintain the code.

When and under what circumstances do I use vuex?

To build a large and medium-sized single-page application, you need to consider how to better manage the state outside the component.

Note: if you are not developing a large single-page application, using vuex may be tedious and redundant, that is, a project that can be developed very quickly, with vuex, the result is more complicated. The general simple store mode is fine.

Five attributes of vuex

State, getters, mutations, actions, modules .

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

2. Geeter: data derived from basic data (state), which is equivalent to the calculation attribute of state

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

The callback function is where we actually make the state change, and it accepts state as the first parameter and commits the load as the second parameter.

4. Action: the function is roughly the same as that of mutation, except that = "1. Action submits the mutation instead of changing the state directly. 2. Action can contain any asynchronous operation.

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

Scenarios used by vuex:

User's personal information management module

The shopping cart module of the e-commerce project calls the interface to get the number of shopping carts every time (if there is a premise), and the effect is achieved, but every HTTP request consumes the performance of the browser. In contrast, it is more advantageous to use vuex's mutations to trigger.

In my order module, the order list also clicks to cancel the order, and then updates the corresponding order list. In this case, Vuex,state is also used to save a state, monitor the status, and update the corresponding list when the change occurs.

From the order settlement page, go to the select coupon page and select the coupon page. How do I save the selected coupon information? State saves the coupon information, when selecting the coupon, mutations submits, on the order settlement page, obtains the selected coupon, and updates the order discount information.

This is the end of the content of "what are the usage scenarios and properties of vuex". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.