current position:Home>When using uniapp for e-commerce projects, vuex is used to realize the global sharing of data to make shopping cart pages

When using uniapp for e-commerce projects, vuex is used to realize the global sharing of data to make shopping cart pages

2022-04-29 14:30:50St purple moon

One . To configure vuex:
1. Create... In the project root directory store Folder , Used exclusively for the storage of vuex Related modules
2. stay store Create a new store.js file
3. stay store.js initialization store Instance object of

//1. Import Vue and Vuex
import Vue from "vue";
import Vuex from 'vuex';

//2. take Vuex Installed as Vue Plug in for 

//3. establish store Instance object of 
const store = new Vuex.Store({
	// mount store modular 

//4. Share out store Instance object of 
export default store

4. stay main.js Import store Instance object and mount to Vue On an instance of :

import store from './store/stroe.js'
const app = new Vue({
	//2. take store Mount to Vue For instance 

Two . Create a shopping cart store modular
1. stay store New in directory cart.js file
2. stay cart.js Middle initialization vuex modular

export default{
	// Open the namespace for the current module 
	// Modular state data 
		// Array of shopping carts , The information object used to store each item in the shopping cart 
		// Information object of each product , All include the following 6 Attributes 
		//{ goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}
	// Modular mutations Method is used to modify state The data 
	// Modular getters attribute , Equivalent to a wrapper for data 

3. stay store.js in , Import and mount shopping cart vuex modular

//1. Import shopping cart vuex modular 
import moduleCart from './cart.js'
const store = new Vuex.Store({
	// mount store modular 
		// To mount a shopping cart vuex modular , The path of members in the module is adjusted to m_cart
		// In the shopping cart module ,cart The access path of the array is m_cart/cart

3、 ... and 、 Use... In the item details page store The data :
1. stay jtsp.vue Medium script Add under node

	// from vuex Export on demand mapState Auxiliary method 
	import {
    mapState} from 'vuex'
	// Use mapstate Method , hold m_cart Module cart Array is mapped to the current page , Use as a calculated attribute 
	//...mapState(' Module name ',[' The name of the data to be mapped '])
	// Whether it's mapping mutation Method 、getters Attribute or state The data , You need to specify the name of the module 

2. When the page is rendered , You can directly use the mapped data :

 Insert picture description here
 Insert picture description here

Four : Realize the function of adding shopping cart :
1. stay store In the catalog cart.js Module , Encapsulate a product information and add it to the shopping cart mutations Method , Name it addToCart:

		// Put the product information goods and cart Module state Compare the information in 
			// According to the... Of the goods submitted Id, Check whether this item exists in the shopping cart 
			// If it doesn't exist , be findResult by undefined
			const findResult = state.cart.find((x) => x.goods_id === goods.goods_id);
				// If this item is not in the shopping cart , directly push
				// If this item is in the shopping cart , Then directly increase the quantity 

2. stay jtsp.vue Under the script In the node , The first addTocart Map to the current page , Then you can go through this.addToCart Get data

import {
    mapState,mapMutation} from 'vuex'

	//1. Determine whether the add to cart button has been clicked 
	if(e.content.text === ' Add to cart '){
		//2. Organize the information object of a commodity 
		const goods = {,,
	//3. adopt this Call the mapped addToCart Method 

copyright notice
author[St purple moon],Please bring the original link to reprint, thank you.

Random recommended