Vue笔记05-Vuex

最新推荐文章于 2023-04-17 10:05:18 发布
最新推荐文章于 2023-04-17 10:05:18 发布
阅读量238 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36059561/article/details/119616481
版权

在这里插入图片描述

Vuex概念

Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），可以实现组件间通信，适用于任意组件间通信。
当多个组件依赖同一状态、不同组件行为需要变更同一状态的时候，需要使用Vuex，也就是用Vuex来管理公共的变量或者数据。

案例

首先引出一个案例，这个案例是单组件，不使用Vuex来完成的。
有一个Count.vue组件，组件中有几个按钮和一个显示当前数据的区域，通过按钮修改当前值并重新显示。
在App.vue中引入Count.vue组件，在Count.vue中写主要的功能逻辑，这里没有什么新的知识点。

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>
<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1,// 用户选择的数字
				sum:0// 当前的和
			}
		},
		methods: {
			increment(){
				this.sum += this.n;
			},
			decrement(){
				this.sum -= this.n;
			},
			incrementOdd(){
				if(this.sum % 2){
					this.sum += this.n;
				}
			},
			incrementWait(){
				setTimeout(()=>{
					this.sum += this.n;
				},500);
			},
		},
	}
</script>
<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

搭建Vuex环境

使用命令npm i vuex安装Vuex。
和前面的文件结构略有变化，在src下需要新建一个store文件夹，文件夹里放index.js文件，在main.js里需要引入store文件夹中暴露的内容。
main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入store，Vue实例和VueComponent实例上就有$store了
import store from './store'
//关闭Vue的生产提示
Vue.config.productionTip = false;
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this;
	}
});

编写index.js，在index.js里，需要介绍的就是Vuex中的三个对象：Actions、Mutations、State，在这3个对象中需要写一些业务方法。最后通过Vuex将Store暴露出去。

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex);
// 准备actions——用于响应组件中的动作
const actions = {
	// 如果action里的业务复杂，action里可以反复dispatch
	fun1(context, value) {
		console.log("fun1处理业务");
		context.dispatch(fun2, value);
	},
	fun2(context, value) {
		console.log("fun2处理业务");
		context.dispatch(fun3, value);
	},
	fun3(context, value) {
		console.log("fun3处理业务");
		context.commit('xxx', value);
	},
	/* jia(context,value){
		console.log('actions中的jia被调用了');
		context.commit('JIA',value);
	},
	jian(context,value){
		console.log('actions中的jian被调用了');
		context.commit('JIAN',value);
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了');
		if(context.state.sum % 2){
			context.commit('JIA',value);
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了');
		setTimeout(()=>{
			context.commit('JIA',value);
		},500);
	}
};
// 准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了');
		state.sum += value;
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了');
		state.sum -= value;
	}
};
// 准备state——用于存储数据
const state = {
	sum:0// 当前的和
};
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}
// 创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
});

说一下这里的actions、mutations、state，getters。
actions中放一些接收dispatch()请求的方法，方法体里做一些业务处理，将value通过context的commit()方法传给mutations中的方法，在mutations中，可以拿到state中的值，并对实际的state里的值进行修改，state中存储的是一些数据信息，getters有点类似组件中的计算属性，通过一些方法，对state中的数据进行加工，通过方法返回值的方式进行返回。
再来看Count.vue组件。
Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>
<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1// 用户选择的数字
			}
		},
		methods: {
			// 如果业务简单，可以不经过dispatch，直接调用commit
			// 这里尽可能写的简单，把业务扔到Vuex.Store.action里
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		}
	}
</script>
<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

组件中需要修改state的值的时候，调用this.$store.dispatch('actions中的方法名', value)方法或者this.$store.commit('mutations中的方法名', value)方法即可。此时来到index.js的对应方法里，会拿到传过来的value，通过state获取到数据，和value做运算。在组件中读取state中值的时候，使用$store.state.sum的方式，读取getters中方法的值使用$store.getters.bigSum。
在actions中可以写异步代码，在mutations中不能写异步代码。

四个map方法的使用

这4个方法，都是写在组件里面的。

mapState方法

帮助我们映射state中数据为计算属性。

mapGetters方法

帮助我们映射getters中数据为计算属性

mapActions方法

帮助我们生成与actions对话的方法，即$store.dispatcher()调用的函数

mapMutations方法

帮助我们生成与mutations对话的方法，即$store.commit()调用的函数
index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了');
		if(context.state.sum % 2){
			context.commit('JIA',value);
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了');
		setTimeout(()=>{
			context.commit('JIA',value);
		},500);
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了');
		state.sum += value;
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了');
		state.sum -= value;
	}
}
//准备state——用于存储数据
const state = {
	sum:0,
	school:'尚硅谷',
	subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum * 10;
	}
}
// 创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
});

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>
<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1// 用户选择的数字
			}
		},
		computed:{
			// 靠程序员自己亲自去写计算属性
			/* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */
			// 借助mapState生成计算属性，从state中读取数据：对象写法
			// key,value分别代表方法名和store.state里的变量
			// key一定是字符串，所以引号可以省略，value是state里的变量，通过字符串去查找具体的变量，引号不能省略
			...mapState({sum:'sum',school:'school',subject:'subject'}),
			// 借助mapState生成计算属性，从state中读取数据：数组写法
			...mapState(['sum','school','subject']),
			// 靠程序员自己写计算属性
			/* bigSum(){
				return this.$store.getters.bigSum
			}, */
			// 借助mapGetters生成计算属性，从getters中读取数据：对象写法
			// key,value分别代表方法名和store.getters里的方法
			...mapGetters({bigSum:'bigSum'}),
			// 借助mapGetters生成计算属性，从getters中读取数据：数组写法
			...mapGetters(['bigSum']),
		},
		methods: {
			// 程序员亲自写方法
			/* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */
			// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions：对象写法
			// key,value分别代表方法名和store.actions里的方法
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
			// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			...mapActions(['jiaOdd','jiaWait']),
			// 程序员亲自写方法
			/* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */
			// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations：对象写法
			// key,value分别代表方法名和store.mutations里的方法
			...mapMutations({increment:'JIA',decrement:'JIAN'}),
			// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations：数组写法
			...mapMutations(['JIA','JIAN'])
		},
		mounted() {
			const x = mapState({sum:'sum',school:'school',subject:'subject'});
			console.log(x);
		}
	}
</script>
<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

多组件共享数据

除了Count.vue组件，还引入了一个Person.vue组件。把数据都写在index.js里，跨组件获取数据的时候，实际上都是去index.js的state里获取数据了，从而实现跨组件共享数据的功能。

Vuex模块化编码

store中引入count.js和person.js文件，并采用默认暴露，在index.js中通过Vuex.Store引入count.js和person.js到modules中，再将Vuex.Store对外默认暴露。在modules中，可以给引入的module起名字，这里起countAbout和personAbout作为名字。现在对外暴露的实际是Vuex.Store.countAbout和Vuex.Store.personAbout。此时Count.vue和Person.vue里的代码也要响应修改。
count.js

// 求和相关的配置
export default {
	// 开启命名空间，否则在*.vue组件里，需要写countAbout.属性的写法
	namespaced:true,
	actions:{
		jiaOdd(context,value){
			console.log('actions中的jiaOdd被调用了');
			if(context.state.sum % 2){
				context.commit('JIA',value);
			}
		},
		jiaWait(context,value){
			console.log('actions中的jiaWait被调用了');
			setTimeout(()=>{
				context.commit('JIA',value);
			},500);
		}
	},
	mutations:{
		JIA(state,value){
			console.log('mutations中的JIA被调用了');
			state.sum += value;
		},
		JIAN(state,value){
			console.log('mutations中的JIAN被调用了');
			state.sum -= value;
		},
	},
	state:{
		sum:0,
		school:'尚硅谷',
		subject:'前端',
	},
	getters:{
		bigSum(state){
			return state.sum * 10;
		}
	}
}

person.js

// 人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
	// 开启命名空间，否则在*.vue组件里，需要写personAbout.属性的写法
	namespaced:true,
	actions:{
		addPersonWang(context,value){
			if(value.name.indexOf('王') === 0){
				context.commit('ADD_PERSON',value);
			}else{
				alert('添加的人必须姓王！');
			}
		},
		addPersonServer(context){
			// 在actions里可以调用异步的方法获取数据
			// 这也是原理图actions中和Backend API交互的部分
			axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
				response => {
					context.commit('ADD_PERSON',{id:nanoid(),name:response.data});
				},
				error => {
					alert(error.message);
				}
			);
		}
	},
	mutations:{
		ADD_PERSON(state,value){
			console.log('mutations中的ADD_PERSON被调用了');
			state.personList.unshift(value);
		}
	},
	state:{
		personList:[
			{id:'001',name:'张三'}
		]
	},
	getters:{
		firstPersonName(state){
			return state.personList[0].name;
		}
	}
}

index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
});

Count.vue，对map方法简写进行修改

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1// 用户选择的数字
			}
		},
		computed:{
			// 第一个参数是module的名称
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			// 第一个参数是module的名称
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store);
		}
	}
</script>
<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

Person.vue，对未使用map方法简写进行修改

<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color:red">Count组件求和为：{{sum}}</h3>
		<h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name">
		<button @click="add">添加</button>
		<button @click="addWang">添加一个姓王的人</button>
		<button @click="addPersonServer">添加一个人，名字随机</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>
<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			personList(){
				return this.$store.state.personAbout.personList;
			},
			sum(){
				return this.$store.state.countAbout.sum;
			},
			// 注意这里的写法，需要使用"/"来访问
			firstPersonName(){
				return this.$store.getters['personAbout/firstPersonName'];
			}
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name};
				// 注意这里的写法，需要使用"/"来访问				
				this.$store.commit('personAbout/ADD_PERSON',personObj);
				this.name = '';
			},
			addWang(){
				const personObj = {id:nanoid(),name:this.name};
				// 注意这里的写法，需要使用"/"来访问
				this.$store.dispatch('personAbout/addPersonWang',personObj);
				this.name = '';
			},
			addPersonServer(){
				this.$store.dispatch('personAbout/addPersonServer');
			}
		}
	}
</script>

Devtools监视的是mutations的变化，可以通过Devtools中的Vuex查看详细数据和调试。

vue中的一个重要插件——vuex
weixin_46376652的博客
07-20 2061
概念专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通讯方式，且适用于任意组件间通讯；
Vue笔记（五）vuex
Tml的博客
10-11 3030
概念、搭建环境、基本使用（举例）、getters、四个map方法、模块化和命名空间
Vue3分割线（Divider）
Mr Dear的博客
04-17 5010
区隔内容的分割线，支持：标题居中；中间无文字；指定文字位置；自定义文字边距；垂直分割线；自定义垂直线高；自定义样式；总之，功能丰富，简单易用😁😁
Vue2.0 Vuex 多组件共享数据
yasinawolaopo的博客
01-06 632
Vuex里的多组件共享数据(重要)
vuex学习
qq_50280292的博客
12-01 306
vuex
Vue全家桶--Vuex学习笔记
qq_37396088的博客
01-31 358
vuex学习 终于学完了vue vue-loader vuex三件套！vuex学习完了记录笔记如下，是看的b站上的vue入门到实战和对比着官方文档学习的 vuex安装 npm install -S vuex store.js import Vuex from ‘vuex’ import Vue from ‘vue’ Vue.use(Vuex) const store = new Vues.store({ state:{}, mutations:{}, actions:{} }) export default
全网最细Vue+vue-router+vue-axios+axios+Vuex创建过程笔记
m0_60920364的博客
05-26 819
全网最细Vue+vue-router+vue-axios+axios+Vuex创建过程笔记
【Vue2.0】笔记（六）-Vue-cli、Vuex、mockjs、gitee、github
小女不才
04-08 2354
前端工程化（四）Vue脚手架(1) 基本用法1.1（五）Element-Ul的基本使用二级目录三级 （四）Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。官网地址：https://cli.vuejs.org/zh/ (1) 基本用法 安装3.x版本的Vue脚手架： npm install -g @vue/cli 卸载命令：npm uninstall -g vue-cli 检查命令 Vu...
Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）
小帅的编程笔记
11-21 908
在上一篇笔记中：Vuex源码学习笔记 - Vuex开发运行流程（二） 我们通过运行npm run dev命令来启动webpack，来开发Vuex，并在Vuex的createStore函数中添加了第一个断点。 那么在看源码之前，建议先要熟悉Vuex的使用，如果还不熟练使用，那么在看的时候很容易会发蒙。 我们来复习下Vuex中的几个重要概念和使用 State - 存储状态 Getter - 类似计算属性 Mutation - 更改状态的唯一方法是提交 mutation。 Action - 可以包含任意异步操作
Vue笔记十：Vuex状态管理
weixin_45844109的博客
06-23 556
Vuex是状态管理，这里的状态可以看成是Vue中的属性，和其他属性相比，所有组件都可以引用Vuex里面的属性，就是常说的数据共享。 Vuex相当于一个仓库，所有的组件都可以到仓库存取东西。第一步 安装，打开终端，输入指令 第二步 引用Vuex，打开main.js，在main.js中引入Vuex，代码如下： 第三步 在src目录下新建store文件夹，并在文件夹中新建index.js文件...
Vuex 4 学习笔记
weixin_44717047的博客
08-30 133
Vuex 4学习笔记
vue的学习笔记：vuex
xinbaiyu的博客
09-12 308
Vuex 1.概念 ​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ ​ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti
Vuex（多组件数据共享的Vue插件）
qq_52013792的博客
11-26 369
1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态（数据）进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用 多个组件需要共享数据时。 3.搭建Vuex环境 创建文件:src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) ​ //准备ac
vue常用之状态管理的vuex的“模块化编码“
空投在我怀里的博客
03-14 218
一、目的：让代码更好维护，让多种数据分类更加明确。 二、修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced.
C#ASP.NET网络进销存管理系统源码数据库 SQL2008源码类型 WebForm
最新发布
11-15
ASP.NET网络进销存管理系统源码 内含一些新技术的使用，使用的是VS .NET 2008平台采用标准的三层架构设计，采用流行的AJAX技术 使操作更加流畅，统计报表使用FLASH插件美观大方专业。适合二次开发类似项目使用，可以节省您 开发项目周期，源码统计报表部分需要自己将正常功能注释掉的源码手工取消掉注释。这是我在调试程 序时留下的。也是上传源码前的疏忽。 您下载后可以用VS2008直接打开将注释取消掉即可正常使用。 技术特点：1、采用目前最流行的.net技术实现。2、采用B/S架构，三层无限量客户端。 3、配合SQLServer2005数据库支持 4、可实现跨越地域和城市间的系统应用。 5、二级审批机制，简单快速准确。 6、销售功能手写AJAX无刷新，快速稳定。 7、统计报表采用Flash插件美观大方。8、模板式开发，能够快速进行二次开发。权限、程序页面、 基础资料部分通过后台数据库直接维护，可单独拿出继续开发其他系统 9、数据字典，模块架构图，登录页面和主页的logo图片 分别放在DOC PSD 文件夹中
(源码)基于ZooKeeper的分布式服务管理系统.zip
11-15
# 基于ZooKeeper的分布式服务管理系统 ## 项目简介 本项目是一个基于ZooKeeper的分布式服务管理系统，旨在通过ZooKeeper的协调服务功能，实现分布式环境下的服务注册、发现、配置管理以及分布式锁等功能。项目涵盖了从ZooKeeper的基本操作到实际应用场景的实现，如分布式锁、商品秒杀等。 ## 项目的主要特性和功能 1. 服务注册与发现通过ZooKeeper实现服务的动态注册与发现，支持服务的动态上下线。 2. 分布式锁利用ZooKeeper的临时顺序节点特性，实现高效的分布式锁机制，避免传统锁机制中的“羊群效应”。 3. 统一配置管理通过ZooKeeper集中管理分布式系统的配置信息，实现配置的动态更新和实时同步。 4. 商品秒杀系统结合分布式锁和ZooKeeper的监听机制，实现高并发的商品秒杀功能，确保库存的一致性和操作的原子性。 ## 安装使用步骤 1. 环境准备
23python3项目.zip
11-15
23python3项目
技术资料分享AL422B很好的技术资料.zip
11-15
技术资料分享AL422B很好的技术资料.zip
c语言俄罗斯方块.rar
11-15
c语言俄罗斯方块
狂神Vue笔记及其源码解析教程
资源摘要信息:"狂神Vue笔记+源码.zip" 狂神Vue笔记+源码.zip文件包是关于Vue.js学习资源的合集，其中包含了Vue.js的详细学习笔记和相关源代码。Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值