Home  >  Article  >  Web Front-end  >  What are the usage scenarios of vuex

What are the usage scenarios of vuex

青灯夜游
青灯夜游Original
2021-04-23 18:27:0511153browse

vuex usage scenarios: 1. User’s personal information management module; 2. Shopping cart module for e-commerce projects; 3. My order module, click to cancel the order in the order list, and then update the corresponding order list; 4. On the order settlement page, obtain the required coupons and update the order discount information.

What are the usage scenarios of vuex

The operating environment of this tutorial: windows7 system, vue2.9.6 version, Dell G3 computer.

First of all, let’s discuss, under what circumstances is vuex necessary?

  • Requires data sharing and behavior splitting;

  • Complex asynchronous logic requires the integration of multiple modules for state evolution;

  • Need to use third-party plug-ins;

  • Need to comprehensively consider the life cycle, sequence, specific logic, etc. of multiple components;

Vuex usage scenarios:

  • User’s personal information management module;

  • The shopping cart module of the e-commerce 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 of vuex. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to use umy-ui in vueNext article:How to use umy-ui in vue