vuex的求和案例和mapstate,mapmutations,mapgetters

这篇具有很好参考价值的文章主要介绍了vuex的求和案例和mapstate,mapmutations,mapgetters。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

main.js

import Vue from 'vue'
import App from './App.vue'
//引入vuex
import Vuex from 'vuex'
//引入store
import store from './store/index'

Vue.config.productionTip = false



new Vue({
    el:"#app",
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

App.vue

<template>
	<div class="container">
		<Count/>
	</div>
</template>

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

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: {
			increment(){
				this.$store.dispatch('jia',this.n)
			},
			decrement(){
				this.$store.dispatch('jian',this.n)
			},
			incrementOdd(){
					this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
					this.$store.dispatch('jiaWait',this.n)	
			},
		},
		mounted(){
			console.log('Count',this.$store)
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

store/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 //当前的和 
}

//准备getters--用于将state中的数据进行加工
const getters={
    bigSum(state){
        return state.sum*10
    }
}


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


getters配置项

当一部分的数据进行一些变化时,可以通过getters的属性来对一部分的数据进行变化

mapState,mapGetters

// sum(){
			// 	return this.$store.state.sum
			// },
			// school(){
			// 	return this.$store.state.school
			// },
			// subject(){
			// 	return this.$store.state.subject
			// },
			// bigSum(){
			// 	return this.$store.getters.bigSum
			// },

			//借助mapState生成计算属性,从state读取数据(对象写法)
			//  ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

			//借助mapState生成计算属性,从state中读取数据(数组写法)
			 ...mapState(['sum','school','subject']),

			 ...mapGetters(['bigSum'])

通过计算属性来改变。

mapMutations

在methods方法下

            // increment(){
			// 	this.$store.commit('JIA',this.n)
			// },
			// decrement(){
			// 	this.$store.commit('JIAN',this.n)
			// },


			//借助mapMutations生成对应的方法,方法中会调用commit去联系mutaions
			...mapMutations({increment:'JIA',decrement:'JIAN'}),

使用之后的整个代码

main.js和App.vue时不变的

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:'前端'
}

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 {mapActions, mapGetters, mapMutations, mapState} 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
			// },
			// bigSum(){
			// 	return this.$store.getters.bigSum
			// },

			//借助mapState生成计算属性,从state读取数据(对象写法)
			//  ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

			//借助mapState生成计算属性,从state中读取数据(数组写法)
			 ...mapState(['sum','school','subject']),

			 ...mapGetters(['bigSum'])



		},
		methods: {
			// increment(){
			// 	this.$store.commit('JIA',this.n)
			// },
			// decrement(){
			// 	this.$store.commit('JIAN',this.n)
			// },


			//借助mapMutations生成对应的方法,方法中会调用commit去联系mutaions
			...mapMutations({increment:'JIA',decrement:'JIAN'}),


			// incrementOdd(){
			// 		this.$store.dispatch('jiaOdd',this.n)
			// },
			// incrementWait(){
			// 		this.$store.dispatch('jiaWait',this.n)	
			// },

			//
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

		},
		mounted(){
			const x =mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

多组件共享数据

即以index.js中的属性为公共汽车。来通过调用其中的属性来实现一个数据间的共享

index.js(这个区域主要是添加了增加人员的方法,在mutations处)

//该文件用于创建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
    },
    ADD_PERSON(state,value){
        console.log('mutations中的ADD_PERSON被调用勒')
        state.personList.unshift(value)
    }
   
}

//准备state -用于存储数据
const state ={
    sum:0, //当前的和 
    school:'尚硅谷',
    subject:'前端',
    personList:[
        {id:'001',name:'张三'}
    ]
}

const getters={
    bigSum(state){
        return state.sum*10
    }
}


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


Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:blue">上方组件的求和为{{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 { nanoid } from 'nanoid'

export default {
    name:'Person',
    data(){
        return{
            name:''
        }
    },
    computed:{
        personList(){
            return this.$store.state.personList
        },
        sum(){
            return this.$store.state.sum
        }
    },
    methods:{
        add(){
            const personObj={id:nanoid(),name:this.name}
            this.$store.commit('ADD_PERSON',personObj)
            this.name=''
            
        }
    }
}
</script>

count.vue(这里主要是在mapstate属性中添加我要获取的personList,然后在展示处展示)文章来源地址https://www.toymoban.com/news/detail-726847.html

<template>
	<div>
		<h1>当前求和为:{{sum}}</h1>
		<h3>当前求和放大10倍为:{{bigSum}}</h3>
		<h3>我在{{school}} 学习{{subject}}</h3>
		<h3 style="color:red">下方组件的总人数是:{{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 {mapActions, mapGetters, mapMutations, mapState} 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
			// },
			// bigSum(){
			// 	return this.$store.getters.bigSum
			// },

			//借助mapState生成计算属性,从state读取数据(对象写法)
			//  ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

			//借助mapState生成计算属性,从state中读取数据(数组写法)
			 ...mapState(['sum','school','subject','personList']),

			 ...mapGetters(['bigSum'])



		},
		methods: {
			// increment(){
			// 	this.$store.commit('JIA',this.n)
			// },
			// decrement(){
			// 	this.$store.commit('JIAN',this.n)
			// },


			//借助mapMutations生成对应的方法,方法中会调用commit去联系mutaions
			...mapMutations({increment:'JIA',decrement:'JIAN'}),


			// incrementOdd(){
			// 		this.$store.dispatch('jiaOdd',this.n)
			// },
			// incrementWait(){
			// 		this.$store.dispatch('jiaWait',this.n)	
			// },

			//
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

		},
		mounted(){
			const x =mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

到了这里,关于vuex的求和案例和mapstate,mapmutations,mapgetters的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vuex前端开发,getters是什么?怎么调用?简单的案例操作

    vuex前端开发,getters是什么?怎么调用?简单的案例操作! 下面通过一些简单的案例,来了解一下,vuex当中的getters到底是什么意思,有哪些实际的操作案例。 Vuex的getters主要用于对 store中的state进行计算或过滤 ,类似于Vue组件中的 计算属性 。它可以对state进行一些处理,然后

    2024年01月19日
    浏览(44)
  • 【大数据Hive3.x数仓开发】窗口函数案例:连续N次登录的用户;级联累加求和;分组TopN

    对窗口函数的讲解part见:【大数据Hive3.x数仓开发】函数–窗口函数 自连接过滤实现 连续两天登陆的用户ID: 窗口函数lead()实现 功能:用于从当前数据中基于当前行的数据向后偏移取值 语法: lead(colName,N,defautValue) colName:取哪一列的值 N:向后偏移N行 defaultValue:如果取不到返回

    2023年04月17日
    浏览(35)
  • mapGetters的使用

    如果一个变量或对象需要在多个页面和组件中使用,那么,可以使用mapGetters。 各个页面使用 1.引入 2.在method同级上放入computed 或者 3.可放入多个对象 getters中的state 列如:getters: { yourGetters: state = state.yourGetters, yourGetters2 :state = state.yourGetters2 } 4.页面变量取用

    2024年02月15日
    浏览(31)
  • 一文解释mapState的来龙去脉

    mapState Vuex 提供的辅助函数之一,将 store 中的状态映射到组件的计算属性中,使得在组件中可以轻松地访问 Vuex store 中的状态值 MapState(映射状态) 在我们的 Count.vue 组件中,可以使用 mapState 来更简洁地获取 count 的状态值 首先,导入 mapState : 然后,在 computed 中使用 mapState :

    2024年02月07日
    浏览(41)
  • hive sql—开窗函数—累积求和和滑动求和

    数据集有三列数据,姓名、月份和数量: 图1 使用 sum() 函数和 over() 来实现,如下: 结果如下: 同一个name,后一个月份都是前几个月份的累加和 图2 需要稍微骚一点的操作,加上一个限制条件: 数字:可正可零可负,正往前,负向后;preceding:向前几行;following:向后几行

    2024年02月11日
    浏览(46)
  • python中按行求和和按列求和的实现

    最近在用python写,由于和matlab相差还是很大,自己的语法也不太熟练,就把自己遇到的问题记录下。 按行求和: 可以看到结果是:[6 6],实现对行的求和 按列求和: 可以看到结果是:[3 4 5],实现对列的求和

    2024年02月11日
    浏览(42)
  • java stream实现分组BigDecimal求和,自定义分组求和

    随着微服务的发展,越来越多的sql处理被放到java来处理,数据库经常会使用到对集合中的数据进行分组求和,分组运算等等。 那怎么样使用java的stream优雅的进行分组求和或运算呢? 这里测试数据学生,年龄类型是Integer,身高类型是BigDecimal,我们分别对身高个年龄进行求和

    2024年02月01日
    浏览(45)
  • Day28 17电话号码的字母组合 39组合求和 40组合求和II

    给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。 给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。          因为输入的数字的数量是不确定的,所以for循环的次数也是不确定的,这里就需要用到回溯的方法了。          一般回

    2024年01月16日
    浏览(50)
  • 【leetcode难题】2569. 更新数组后处理求和查询【线段树实现01翻转和区间求和模版】

    关键就是记录每次操作2时,nums1中的1的个数 这就需要实现线段树进行区间反转以及区间求和

    2024年02月15日
    浏览(42)
  • C语言二维数组中:主次对角线求和,上下三角求和,杨辉三角,矩阵转置

     p8 有些的结论需要直接记住 目录 矩阵转置  主对角线和次对角线 下三角 和上三角(一般是让求和) 下三角  上三角 杨辉三角 不是方阵 需要用到第二个二维数组  b[i][j]=a[i][j] 是方阵     方法1 借助第二个二维数组,同上 方法2    下三角换即可(是方阵的话一般题目都

    2024年01月22日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包