Reference: Use vuex to realize shopping cart
vue+vuex to realize shopping cart function
1. First of all, what function does my shopping cart module achieve?
- Click on the product data in the detail page to add the data to the shopping cart
- Display the name, unit price and quantity of the product in the shopping cart
- With selection function, you can select or deselect, you can select all or cancel all, you can only calculate the total price of the selected goods, and determine whether to select the goods
2. Logical arrangement
First, the realization of the shopping cart static page is realized by four components. The detailed information of each product is used as a separate component, the display of the product list in the shopping cart is used as a component, and the bottom select all and the checkout button are also used as a component. Finally, These sub-components introduce the overall shopping cart page component.
Through the vuex state management mechanism to realize the data interaction of the shopping cart, create a store file and mount it on the vue instance, define a state that can mount data in the store file, and define an array cartList to store product information and other components You can get and use this data.
How to realize function 1
Click the product to add to the shopping cart, you need to modify the cartList in the state, and use the mutations method to modify the data in the state , but the mutations can only handle the synchronization problem, and the actions method can be used to handle the asynchronous problem.
In the mall system I made, only the add shopping cart function is set on the product detail page. In the specific implementation, mapActions is introduced into the detail page component. Clicking to add to the shopping cart will execute the add shopping defined in the actions object in the store file In the cart method, the actions object determines the added product. If the previous product already exists, the quantity is increased by 1, and if the product does not exist, the product is added to the cartList. It returns a promise object.
How to realize function 2
In function 1, we have put the product objects added to the shopping cart into the cartList, and the product objects include detailed information that needs to be displayed in the shopping cart. **Introduce mapGetters into the shopping cart product list display component to receive the data in vuex. At the same time, v-for is used to traverse the product objects in the cartList, and at the same time, the component that displays a single product information receives a single product object from the parent component through props; ** receives the data mounted in vuex in the calculated attribute. mapGetters actually maps the getters attribute in the store. The getters are actually similar to the computed attribute of vue. The data is further processed through the getters to get the value we want, because I need to know the array data that stores the product information and its length , So put it in getters
How to realize function 3
The data in vuex is still received through mapGetters. For the cartList array that stores the products, find the selected products through the filter method of the array, and then calculate the total value of the selected products through the reduce method of the array; the logic of selecting all: if some or all of the products are not selected, use forEach makes each item in the cartList selected; if all items are selected, each item in the cartList is unselected