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 
Vue.use(Vuex);

//3. establish store Instance object of 
const store = new Vuex.Store({
    
	// mount store modular 
	modules:{
    },
})

//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({
    
    ...App,
	//2. take store Mount to Vue For instance 
	store
})

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 
	namespaced:true,
	// Modular state data 
	state:()=>({
    
		// 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}
		cart:[],
	}),
	// Modular mutations Method is used to modify state The data 
	mutations:{
    },
	// Modular getters attribute , Equivalent to a wrapper for data 
	getters:{
    }
}

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 
	modules:{
    
		// 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
			m_cart:moduleCart,
		}
})

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'
computed:{
    
	// 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 '])
	...mapState('m_cart',['cart']),
	// 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:


mutations:{
    
		// Put the product information goods and cart Module state Compare the information in 
		addToCart(state,goods){
    
			// 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(!findResult){
    
				// If this item is not in the shopping cart , directly push
				state.cart.push(goods);
			}else{
    
				// If this item is in the shopping cart , Then directly increase the quantity 
				findResult.goods_count++
			}
		}
	},

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'
...mapMutatione('m_cart',['addToCart']),

buttonClick(e){
    
	//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 = {
    
			goods_id:this.goods.id,
			goods_name:this.goods.name,
			goods_price:this.goods.price,
			goods_count:1,
			goods_small_logo:this.goods.logo,
			goods_state:true,
		}
	}
	//3. adopt this Call the mapped addToCart Method 
	this.addToCart(goods);
}
},

copyright notice
author[St purple moon],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291259114976.html

Random recommended