Vue中的Vuex

最新推荐文章于 2024-06-01 10:00:35 发布
最新推荐文章于 2024-06-01 10:00:35 发布
阅读量736 收藏 7
点赞数 1
分类专栏： web 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41829060/article/details/123655503
版权

简介

1、组成部分：（三个对象类型）
在这里插入图片描述

  1. Actions：用来接收从Vue Componts的方法和数值，如果需要去调用数值也可以先去调用成功数值后再传给Mutation
  2. Mutation：利用Action传来的方法和数据，真正对数据进行加工处理。注意，所有业务逻辑（比如条件判断等）都在Action中，Mutation中只负责进行数据运算与加工
  3. State：将处理好的结果返回给Vue Components

Note：Vuex中的三个部分都要收到store的管理

使用方法

  1. 安装vuex：npm i vuex
  2. 使用vuex：Vue.use(Vuex)
  3. 利用store管理Actions，Mutations，State
  4. 让所有的组件vc都能看得到stort

步骤一：安装vuex

Note：Vue2 中使用Vuex3；Vue3中使用Vuex4

npm i vuex@3

步骤二：使用vuex

（1）在main.js中加入如下语句：

//引入vuex
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex)

（2）（官网推荐）在src中新建一个store文件，在store文件中新建index.js文件
在这里插入图片描述

步骤三：配置Vuex的环境

index.js

//该文件用于创建Vuex中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {}
//准备mutations--用于操作数据
const mutations = {}
//准备state--用于存储数据
const state = {}

//创建并到处store
export default new Vuex.Store({
	actions:actions,
	mutations:mutations,
	state:state
})

main.js

//引入vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入vuex
import Vuex from 'vuex'
//引入store
import store from './store/index.js'

Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

new Vue({
  render: h => h(App),
  store:store,
  beforeCreate() {
  	Vue.prototype.$but = this
  },
}).$mount('#app')

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)
			},
		},
		mounted() {
			//console.log('Count',this)
		}
	}
</script>

<style lang="css">
	button{
		padding: 5px;
	}
</style>

App.vue

<template>
    <div>
		<Count></Count>
	</div>
</template>

<script scoped>
	import Count from './components/Count.vue'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			//console.log('App',this);
		}
	}
</script>

Note：因为js文件会先扫描出import文件执行后再去按顺序执行其他语句，所以main.js中如果写上import store from './store/index.js’会报错，因为需要先使用Vuex，而Vue.use(Vuex)会在import后执行。为了解决这个问题需要在index.js中先使用Vuex，如上图所示。

步骤四：实现功能

需要实现的功能：
（1）点击+n；
（2）点击-n；
（3）当前数字是奇数时可以+n；
（4）延迟0.5s+n；
（5）n可以选择为0，1，2；

代码实现：
Count.vue
Note：在state中的数据都要通过$state进行获取。

<template>
	<div>
		<h1>当前求和为：{{$store.state.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,//用户选择的数字
			}
		},
		methods:{
			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{
		padding: 5px;
	}
</style>

index.js

//该文件用于创建Vuex中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
	// jia(context,value){
	// 	context.commit('JIA',value);
	// },
	// jian(context,value){
	// 	context.commit('JIAN',value);
	// },
	jiaWait(context,value){
		setTimeout(()=>{
			context.commit('JIA',value);
		},500);
	},
	jiaOdd(context,value){
		if(context.state.sum%2){ //注意这里必须是访问state的sum，如果直接访问sum是undefined
			context.commit('JIA',value);
		}
	},
}
//准备mutations--用于操作数据
const mutations = {
	JIA(state,value){
		state.sum += value;
	},
	JIAN(state,value){
		state.sum -= value;
	}
}
//准备state--用于存储数据
const state = {
	sum:0
}

//创建并到处store
export default new Vuex.Store({
	actions:actions,
	mutations:mutations,
	state:state
})

步骤五：getters配置项

当需要进行封装数据运算时可以使用getters配置项，需要在index.js中进行配置与actions，mutations，state配置类似，具体操作如下：
Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h1>当前求和放大十倍为：{{$store.getters.bigSum}}</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,//用户选择的数字
			}
		},
		methods:{
			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{
		padding: 5px;
	}
</style>

index.js

//该文件用于创建Vuex中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
	// jia(context,value){
	// 	context.commit('JIA',value);
	// },
	// jian(context,value){
	// 	context.commit('JIAN',value);
	// },
	jiaWait(context,value){
		setTimeout(()=>{
			context.commit('JIA',value);
		},500);
	},
	jiaOdd(context,value){
		if(context.state.sum%2){ //注意这里必须是访问state的sum，如果直接访问sum是undefined
			context.commit('JIA',value);
		}
	},
}
//准备mutations--用于操作数据
const mutations = {
	JIA(state,value){
		state.sum += value;
	},
	JIAN(state,value){
		state.sum -= value;
	}
}
//准备state--用于存储数据
const state = {
	sum:0
}
//准备getters配置项
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并到处store
export default new Vuex.Store({
	actions:actions,
	mutations:mutations,
	state:state,
	getters:getters
})

变更需求

新需求：在页面中展示文字“我在尚硅谷学习前端”，尚硅谷，前端等学校，学科名称都存在vuex中。
效果如下图：
在这里插入图片描述
所需要的操作：
1、在index.js中添加school和subject属性，并设置为’尚硅谷‘和’前端‘；
2、在Count.vue文件中显示school和subject两个属性。
操作如下图所示：
在这里插入图片描述

在这里插入图片描述

但现在要进行对{{}}中的名称进行简写，可以利用mapState()，mapGetter()来实现。

mapState()，mapGetter()的语法介绍：
在这里插入图片描述

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h1>当前求和放大十倍为：{{bigSum}}</h1>
		<h1>我在{{school}}学习{{subject}}</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>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:'Count',
		data(){
			return {
				n:1,//用户选择的数字
			}
		},
		computed:{
			
			//借助mapState生成计算属性，从state中读取数据（对象写法）
			//...mapState({'sum':'sum','school':'school','subject':'subject'}),
			
			//借助mapGetters生成计算属性，从getters中读取数据（对象写法）
			//...mapGetters({'bigSum':'bigSum'}),
			
			//借助mapState生成计算属性，从state中读取数据（数组写法）
			...mapState(['sum','school','subject']),
			
			//借助mapGetters生成计算属性，从getters中读取数据（数组写法）
			...mapGetters(['bigSum']),
		},
		methods:{
			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{
		padding: 5px;
	}
</style>

mapMutations 与 mapActions

在这里插入图片描述

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h1>当前求和放大十倍为：{{bigSum}}</h1>
		<h1>我在{{school}}学习{{subject}}</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(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:{
			
			//借助mapState生成计算属性，从state中读取数据（对象写法）
			//...mapState({'sum':'sum','school':'school','subject':'subject'}),
			
			//借助mapGetters生成计算属性，从getters中读取数据（对象写法）
			//...mapGetters({'bigSum':'bigSum'}),
			
			//借助mapState生成计算属性，从state中读取数据（数组写法）
			...mapState(['sum','school','subject']),
			
			//借助mapGetters生成计算属性，从getters中读取数据（数组写法）
			...mapGetters(['bigSum']),
		},
		methods:{
			/* 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);
			}, */
			
			//借助mapActions生成方法，包含$state.dispathch()函数（对象写法）
			...mapActions({'incrementOdd':'jiaOdd','incrementWait':'jiaWait'}),
			//借助mapActions生成方法，包含$state.dispathch()函数（数组写法，但要求Count中名称与index.js中名称相同）
			//...mapActions(['incrementOdd':'jiaOdd','incrementWait':'jiaWait']),
			
			
			//借助mapMutations生成方法，包含$state.commit()函数（对象写法）
			...mapMutations({'increment':'JIA','decrement':'JIAN'}),
			//借助mapMutations生成方法，包含$state.commit()函数（数组写法，但要求Count中名称与index.js中名称相同）
			//...mapMutations(['JIA','JIAN']),
		},
		mounted() {
			//console.log('Count',this)
		}
	}
</script>

<style lang="css">
	button{
		padding: 5px;
	}
</style>



多组件共享数据（实现一个数据不同组件进行显示）

在这里插入图片描述
不同的组件在导入vuex后就可以使用vuex中的数据了，如果想要使用的简便还可以用mapState，mapGetters等映射方式自动生成计算属性，用mapMutations，mapActions自动生成方法。




Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h1>当前求和放大十倍为：{{bigSum}}</h1>
		<h1>我在{{school}}学习{{subject}}</h1>
		<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:{
			
			//借助mapState生成计算属性，从state中读取数据（对象写法）
			//...mapState({'sum':'sum','school':'school','subject':'subject'}),
			
			//借助mapGetters生成计算属性，从getters中读取数据（对象写法）
			//...mapGetters({'bigSum':'bigSum'}),
			
			//借助mapState生成计算属性，从state中读取数据（数组写法）
			...mapState(['sum','school','subject','personList']),
			
			//借助mapGetters生成计算属性，从getters中读取数据（数组写法）
			...mapGetters(['bigSum']),
		},
		methods:{
			/* 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);
			}, */
			
			//借助mapActions生成方法，包含$state.dispathch()函数（对象写法）
			...mapActions({'incrementOdd':'jiaOdd','incrementWait':'jiaWait'}),
			//借助mapActions生成方法，包含$state.dispathch()函数（数组写法，但要求Count中名称与index.js中名称相同）
			//...mapActions(['incrementOdd':'jiaOdd','incrementWait':'jiaWait']),
			
			
			//借助mapMutations生成方法，包含$state.commit()函数（对象写法）
			...mapMutations({'increment':'JIA','decrement':'JIAN'}),
			//借助mapMutations生成方法，包含$state.commit()函数（数组写法，但要求Count中名称与index.js中名称相同）
			//...mapMutations(['JIA','JIAN']),
		},
		mounted() {
			//console.log('Count',this)
		}
	}
</script>

<style lang="css">
	button{
		padding: 5px;
	}
</style>

Person.vue

<template>
	<div>
		<h1>人员列表</h1>
		<h3>Count组件的求和：{{sum}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name" />
		<button @click="add">添加</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			...mapState(['personList']),
			sum(){
				return this.$store.state.sum
			}
		},
		methods:{
			add(){
				//创建一个人的类型
				const personObj = {id:nanoid(),name:this.name}
				//添加一个人，这里直接跳过Actions，调用Mutations，因为业务逻辑比较简单
				this.$store.commit('ADD_PERSON',personObj)
				//写完清空
				this.name = ''
			}
		}
	}
</script>

index.js

//该文件用于创建Vuex中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
	// jia(context,value){
	// 	context.commit('JIA',value);
	// },
	// jian(context,value){
	// 	context.commit('JIAN',value);
	// },
	jiaWait(context,value){
		setTimeout(()=>{
			context.commit('JIA',value);
		},500);
	},
	jiaOdd(context,value){
		if(context.state.sum%2){ //注意这里必须是访问state的sum，如果直接访问sum是undefined
			context.commit('JIA',value);
		}
	},
}
//准备mutations--用于操作数据
const mutations = {
	JIA(state,value){
		state.sum += value;
	},
	JIAN(state,value){
		state.sum -= value;
	},
	ADD_PERSON(state,value){
		state.personList.unshift(value);
	}
}
//准备state--用于存储数据
const state = {
	sum:0,
	school:'尚硅谷',
	subject:'前端',
	personList:[
		{id:'001',name:'张三'}
	]
}
//准备getters配置项
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并到处store
export default new Vuex.Store({
	actions:actions,
	mutations:mutations,
	state:state,
	getters:getters
})

Vuex的模块化编码

模块化目的：方便进行处理分析，防止git分支合并时报错。

namespaced

功能：使模块化后的内容能够被mapState等map方法访问到，如下图：
在这里插入图片描述
为了能达到上图的效果可以采用如下做法：（在index.js文件中添加）
在这里插入图片描述

模块化后的代码：
index.js

//该文件用于创建Vuex中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex)

//count组件模块
const countAbout = {
	namespaced:true,
	actions:{
		jiaWait(context,value){
			setTimeout(()=>{
				context.commit('JIA',value);
			},500);
		},
		jiaOdd(context,value){
			if(context.state.sum%2){ //注意这里必须是访问state的sum，如果直接访问sum是undefined
				context.commit('JIA',value);
			}
		},
	},
	mutations:{
		JIA(state,value){
			state.sum += value;
		},
		JIAN(state,value){
			state.sum -= value;
		},
	},
	state:{
		sum:0
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	}
}

//person组件模块
const personAbout = {
	namespaced:true,
	actions:{},
	mutations:{
		ADD_PERSON(state,value){
			state.personList.unshift(value);
		},
	},
	state:{
		school:'尚硅谷',
		subject:'前端',
		personList:[
			{id:'001',name:'张三'}
		]
	},
	getters:{}
}


//创建并到处store
export default new Vuex.Store({
	modules:{
		countAbout:countAbout,
		personAbout:personAbout
	}
})

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h1>当前求和放大十倍为：{{bigSum}}</h1>
		<h1>我在{{school}}学习{{subject}}</h1>
		<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:{
			...mapState('countAbout',['sum']),
			...mapState('personAbout',['personList','school','subject']),
			...mapGetters('countAbout',['bigSum']),
		},
		methods:{
			...mapActions('countAbout',{'incrementOdd':'jiaOdd','incrementWait':'jiaWait'}),
			...mapMutations('countAbout',{'increment':'JIA','decrement':'JIAN'}),
		},
		mounted() {
			//console.log('Count',this)
		}
	}
</script>

<style lang="css">
	button{
		padding: 5px;
	}
</style>

Person.vue

<template>
	<div>
		<h1>人员列表</h1>
		<h3>Count组件的求和：{{sum}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name" />
		<button @click="add">添加</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			...mapState('personAbout',['personList']),
			sum(){
				return this.$store.state.countAbout.sum
			}
		},
		methods:{
			add(){
				//创建一个人的类型
				const personObj = {id:nanoid(),name:this.name}
				//添加一个人，这里直接跳过Actions，调用Mutations，因为业务逻辑比较简单
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				//写完清空
				this.name = ''
			}
		}
	}
</script>

新练习

目的：
1、从getters读取数据
2、dispatch去联系actions
3、Actions联系后端的API

index.js

//该文件用于创建Vuex中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex
import axios from 'axios'
//引入nanoid
import {nanoid} from 'nanoid'
Vue.use(Vuex)

//count组件模块
const countAbout = {
	namespaced:true,
	actions:{
		jiaWait(context,value){
			setTimeout(()=>{
				context.commit('JIA',value);
			},500);
		},
		jiaOdd(context,value){
			if(context.state.sum%2){ //注意这里必须是访问state的sum，如果直接访问sum是undefined
				context.commit('JIA',value);
			}
		},
	},
	mutations:{
		JIA(state,value){
			state.sum += value;
		},
		JIAN(state,value){
			state.sum -= value;
		},
	},
	state:{
		sum:0
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	}
}

//person组件模块
const personAbout = {
	namespaced:true,
	actions:{
		addPersonWang(context,value){
			if(value.name.indexOf("王") == 0){
				context.commit('ADD_PERSON',value);
			}
			else{
				alert('输入的人必须为姓王的人!!!');
			}
		},
		addPersonServer(context){
			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){
			state.personList.unshift(value);
		},
	},
	state:{
		school:'尚硅谷',
		subject:'前端',
		personList:[
			{id:'001',name:'张三'}
		]
	},
	getters:{
		firstPersonName(state){
			return state.personList[0].name;
		}
	}
}


//创建并到处store
export default new Vuex.Store({
	modules:{
		countAbout:countAbout,
		personAbout:personAbout
	}
})

Person.vue

<template>
	<div>
		<h1>人员列表</h1>
		<h3>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 {mapState} from 'vuex'
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			...mapState('personAbout',['personList']),
			sum(){
				return this.$store.state.countAbout.sum
			},
			firstPersonName(){
				//注意模块化条件下getters内部的写法。
				return this.$store.getters['personAbout/firstPersonName']
			}
		},
		methods:{
			add(){
				//创建一个人的类型
				const personObj = {id:nanoid(),name:this.name}
				//添加一个人，这里直接跳过Actions，调用Mutations，因为业务逻辑比较简单
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				//this.$store.dispatch('personAbout/addPersonWang',personObj)
				//写完清空
				this.name = ''
			},
			addWang(){
				//创建一个人的类型
				const personObj = {id:nanoid(),name:this.name}
				//添加一个人，这里直接跳过Actions，调用Mutations，因为业务逻辑比较简单
				//this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				//写完清空
				this.name = ''
			},
			addPersonServer(){
				this.$store.dispatch('personAbout/addPersonServer')
			}
		}
	}
</script>

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h1>当前求和放大十倍为：{{bigSum}}</h1>
		<h1>我在{{school}}学习{{subject}}</h1>
		<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:{
			...mapState('countAbout',['sum']),
			...mapState('personAbout',['personList','school','subject']),
			...mapGetters('countAbout',['bigSum']),
		},
		methods:{
			...mapActions('countAbout',{'incrementOdd':'jiaOdd','incrementWait':'jiaWait'}),
			...mapMutations('countAbout',{'increment':'JIA','decrement':'JIAN'}),
		},
		mounted() {
			//console.log('Count',this)
		}
	}
</script>

<style lang="css">
	button{
		padding: 5px;
	}
</style>
bug_killer@
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex详解
weixin_42464106的博客
11-10 1498
state 存放数据，类似于vue的data getters 存放数据，类似于vue的computed mutations 定义操作state数据的方法，commit mutations actions 进行异步操作，异步执行mutations的方法，dispatch actions module 将store分割成多个模块，每个模块都有自己的state、mutaion、action和getter..... 辅助函数：mapState、mapGetters、mapMutation
Vuex：简介和基本使用
程序员无羡的博客
04-07 5347
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))getters: {// getters函数的第一个参数是 state// 必须要有返回值。
Vuex：全面指南及使用示例
最新发布
徐大大的博客
06-01 980
详细了解了 Vuex 的基本概念及其在 Vue.js 应用中的使用方法。从安装和配置 Vuex，到创建和使用 store，再到模块化 store，以及结合实际项目进行用户登录的完整示例，本文提供了一个全面的学习路径。
1-vuex安装及详细使用教程-附案例源码
xiao廸要飞
08-07 8404
文章目录1. 为什么要用 vuex ？2. vuex 是什么？2.1 单向数据流2.1.1 单向数据流小结3. vuex 的工作流4. 安装 vuex5. 引入 vuex6. 从 Store 开始6.1 创建一个 Store6.2 实例6.2.1 初始化6.2.2 example016.2.2.1 example01-16.2.2.2 example01-26.2.2.3 example01-36.2.2.4 example01-46.2.2.5 example01-56.2.2.6 example01-
Vuex介绍
m0_53151031的博客
11-15 4127
一、Vuex简介 二、了解vuex中的各个js文件的用途 三、利用vuex同步存值 四、利用vuex取值 五、Vuex的异步加载问题及后台调用问题
vue中vuex模板
05-02
1. **state**: 在Vuex中，`state`是全局状态对象，存储着应用中所有的共享状态。在这个模板中，它通常定义在`store/state.js`文件中。所有的组件都能通过`this.$store.state`访问到这些状态，但直接修改`state`是不...
分分钟学会vue中vuex的应用（入门教程）
12-09
在vue中当我们管理数据的时候比较乱，我们要用到下面的这个库，vuex.js Vuex介绍 每一个Vuex应用的核心就是store（仓库），他是用来存储数据的 “store” 基本上就是一个容器，它包含着你的应用中大部分的状态(state...
vue+vuex实现可视化图形编辑器
05-13
Vuex则是Vue生态中的状态管理库，它帮助开发者在大型应用中维护和管理组件间的共享状态。当这两者结合，可以创建出功能强大的Web应用程序，包括像“可视化图形编辑器”这样的复杂项目。 “vue+vuex实现可视化图形...
基于vue、vuex、ElementUI的后台管理系统源码.zip
07-06
Vuex是Vue生态中的状态管理库，它为大型Vue应用提供集中式的存储，使得组件间的状态共享和通信变得更加有序和可控。Vuex遵循 Flux 架构模式，提供状态存储、派发动作、计算属性等机制，帮助开发者更好地管理应用程序...
【Vuex基础详细理解】
小田是个程序员的博客欢迎你的到来呀~
03-17 2336
咱头发可是越来越少了！！！ 自己对Vuex基础部分的理解，希望对大家有一定帮助
Vuex
weixin_45174537的博客
09-04 449
vue中各个组件之间传值 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…); 2.非父子组件或父子组件 通过数据总数 Bus，this.root.root.root.emit(‘事件名’,参数1,参数2,…) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1...
Vuex详解，一文彻底搞懂Vuex
qq_38210427的博客
04-27 504
将上面的减法操作改为异步操作。
Vue基础知识总结 14：Vuex是做什么的?
学Java，找哪吒
05-11 1万+
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex状态管理图例 简单的案例 ...
Vuex是什么?
热门推荐
编程知识分享
06-04 3万+
记得去年公司招聘前端工程师的时候，我要负责准备面试题去考验面试者，让我记忆深刻的有一件事，我看大多数面试者简历上都写了熟练掌握Vuex，然而当我问起的时候，大部分回答都支支吾吾，解释不清，而当我提起与Vuex书写相似的Vux的时候，偶尔会被面试者反问到：“这不是一个东西吗？”，和我一同负责面试的技术总监（python，负责后台）也会充满疑惑，也会小声问道：“不是一样的吗？”，我就只好解...
在Vue项目中使用Vuex
_Previous的博客
04-15 6611
在Vue项目中使用Vuex 什么是Vuex “Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。” 那什么是状态呢？以我的理解就是在vue组件的data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。所以Vuex可以这么理解：集中管理所有...
vue中使用vuex(超详细)
qq_44845659的博客
09-18 2074
vue中使用vuex(超详细) vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步） 一、适合初学者使用，保存数据以及获取数据 1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没
Vue学习：Vue中的vuex
qq_49916504的博客
06-16 1127
Vue中的vuex详解
vue-x储存与本地储存（localstorage、sessionstorage）
qq_37642495的博客
12-27 3361
sessionstorage 也称会话缓存，当用户关闭浏览器窗口后，数据就会被删除； localstorage 储存的数据没有时间限制，只要不删除，都会存在 vue-x 一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 用法： https://vuex.vuejs.org/zh/ 总结 1.区别：...
vue中vuex使用
09-11
在Vue中使用Vuex，你需要按照以下步骤进行设置： 1. 安装Vuex：在项目根目录下执行以下命令安装Vuex依赖： ``` npm install vuex ``` 2. 创建store：在项目的src目录下创建一个名为store的文件夹，然后在该文件夹...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值