Vuex③(getters，四种map映射方法)

已于 2022-07-14 23:51:19 修改
阅读量1k 收藏 6
点赞数 9
分类专栏： Vue # Vue2 文章标签： 前端 javascript html
于 2022-07-09 23:24:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyb18507175502/article/details/125698620
版权
Vue 同时被 2 个专栏收录
41 篇文章 9 订阅
订阅专栏
Vue2
41 篇文章 1 订阅
订阅专栏

文章目录

getters配置项

当state中的数据需要经过加工后再使用时，可以使用getters加工。

它与计算属性computed有些类似，但是它与计算属性的不同点在于，其可以在任意组件中复用，而计算属性只在当前组件中生效。

那么它如何使用呢，我们举一个例子，在求和案例的基础上，将和放大十倍展示：

步骤一：我们先在store中添加getter配置项

......

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

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

在这里插入图片描述
state与getters的关系，就如同data与computed的关系

这里于计算属性的写法一样，不过我们的方法中会传入一个参数state。

步骤二：组件中读取数据

我们可以在store的getters中找到他：
在这里插入图片描述

于是我们的代码可以这么写：

<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>

在开发者工具中我们可以查看getters：
在这里插入图片描述

mapState与mapGetters

我们在完成求和案例的时候会发现，我们要呈现一个数据的时候前面要加一些重复繁冗的前缀，如果要呈现的数据变得很多，那么就会变得非常的麻烦，例如：

<template>
    <div>
        <h1>当前求和为：{{$store.state.sum}}</h1>
        <h1>当前求和放大10倍为：{{$store.getters.bigSum}}</h1>
        <h1>学生姓名：{{$store.state.student}}</h1>
        <h1>学校名称：{{$store.state.school}}</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>

我们有一种解决办法就是使用计算属性computed：

<template>
    <div>
        <h1>当前求和为：{{sum}}</h1>
        <h1>当前求和放大10倍为：{{bigSum}}</h1>
        <h1>学生姓名：{{student}}</h1>
        <h1>学校名称：{{school}}</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:'MyCount',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        computed:{
            //靠程序员自己亲自去写计算属性
            sum(){
                return this.$store.state.sum
            },
            school(){
                return this.$store.state.school
            },
            student(){
                return this.$store.state.student
            },
            bigSum(){
				return this.$store.getters.bigSum
			},
         },
		 ······
    }
</script>

<style lang="css">
    button{
        margin-left: 5px;
    }
</style>

我们观察这些计算属性可以发现一些规律，于是我们可以借助Vuex中为我们生成代码的函数，只需传入几个简单的参数就可以达到同样的效果，这个方法就是mapState

这个方法能帮我们生成前三个计算属性，也就是跟state有关的：
在这里插入图片描述

首先我们要引入它：

import {mapState} from 'vuex'

其次这个方法可以传入一个对象：

  • 对象的键记录计算属性的名
  • 对象的值记录其在state中对应的名字
mapState({sum:'sum',school:'school',student:'student'})

我们可以把它打印出来看看：
在这里插入图片描述
他是对象，其中的每一个函数等价于刚才的计算属性

所以我们可以利用ES6的语法，把这个对象解构放入到计算属性中：

       computed:{
            //靠程序员自己亲自去写计算属性
            // sum(){
            //     return this.$store.state.sum
            // },
            // school(){
            //     return this.$store.state.school
            // },
            // student(){
            //     return this.$store.state.student
            // },
            ...mapState({sum:'sum',school:'school',student:'student'}),
            bigSum(){
				return this.$store.getters.bigSum
			},
         },

结果：
在这里插入图片描述

mapState这个方法还有另一种写法，他可以传入一个数组。如果你在使用第一种方法的时候发现键和值一模一样就可以使用这种写法:

...mapState(['sum','school','student'])

接下来我们解决getters的问题，它也有一个对应的函数mapGetters

这个函数的使用方法与mapState一模一样

有一个注意点：
如果你使用的计算属性，那么在开发者工具中显示：
在这里插入图片描述
如果你使用的映射方式，那么在开发者工具中显示：
在这里插入图片描述

mapActions与mapMutations

接下来我们来优化methods中的代码：

       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)
            },
        },

首先我们可以看到上面两个方法，都是用了commit，而commit是用来与mutations对话的(Vuex原理图)，所以在这里我们使用mapMutations方法来生成代码

与前面不同的是：
在这里插入图片描述
上面是原方法，而下面是我们使用mapMutations方法生成的，由此我们知道这个this.n我们要在调用的时候传进去，而不是通过mapMutations来传。其他的使用与前文所提到的mapState与mapGetters一样。

代码如下：

<template>
    <div>
        <h1>当前求和为：{{sum}}</h1>
        <h1>当前求和放大10倍为：{{bigSum}}</h1>
        <h1>学生姓名：{{student}}</h1>
        <h1>学校名称：{{school}}</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">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations} from 'vuex'
    export default {
        name:'MyCount',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        computed:{
            //靠程序员自己亲自去写计算属性
            // sum(){
            //     return this.$store.state.sum
            // },
            // school(){
            //     return this.$store.state.school
            // },
            // student(){
            //     return this.$store.state.student
            // },
            ...mapState({sum:'sum',school:'school',student:'student'}),
            // bigSum(){
			// 	return this.$store.getters.bigSum
			// },
            ...mapGetters(['bigSum']),
         },
        methods: {
            // increment(){
            //     this.$store.commit('JIA',this.n)
            // },
            // decrement(){
            //     this.$store.commit('JIAN',this.n)
            // },
            ...mapMutations({increment:'JIA',decrement:'JIAN'}),
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            },
        },
        mounted() {
            // console.log(mapState({sum:'sum',school:'school',student:'student'}))
        },
    }
</script>

如果我们在回调时不传入参数，那么其实传的就是默认的事件对象：
在这里插入图片描述

然后下面的两个方法(使用了dispatch，与Actions对话)我们使用mapActions方法进行生成

完整优化代码如下：

<template>
    <div>
        <h1>当前求和为：{{sum}}</h1>
        <h1>当前求和放大10倍为：{{bigSum}}</h1>
        <h1>学生姓名：{{student}}</h1>
        <h1>学校名称：{{school}}</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:'MyCount',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        computed:{
            //靠程序员自己亲自去写计算属性
            // sum(){
            //     return this.$store.state.sum
            // },
            // school(){
            //     return this.$store.state.school
            // },
            // student(){
            //     return this.$store.state.student
            // },
            ...mapState({sum:'sum',school:'school',student:'student'}),
            // bigSum(){
			// 	return this.$store.getters.bigSum
			// },
            ...mapGetters(['bigSum']),
         },
        methods: {
            // increment(){
            //     this.$store.commit('JIA',this.n)
            // },
            // decrement(){
            //     this.$store.commit('JIAN',this.n)
            // },
            ...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() {
            // console.log(mapState({sum:'sum',school:'school',student:'student'}))
        },
    }
</script>

<style lang="css">
    button{
        margin-left: 5px;
    }
</style>

四种map映射方法的总结

四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

    computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

十八岁讨厌编程
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
m0_58656423的博客
05-19 2351
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
对vuex中getters计算过滤操作详解
10-16
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它通过集中式的存储管理应用程序的所有组件的状态，并以相应的规则确保状态以一种可预测的方式发生变化。在这个教程中，我们将深入探讨 Vuex 中的 `getters`，...
mapGetters 辅助函数
weixin_45677987的博客
03-19 2万+
1： mapGetters： 辅助函数 mapGetters: 辅助函数 mapGetters: 辅助函数仅仅将store 中的 getter 映射到局部计算属性： 1： import { mapGetters } from 'vuex' 2： export default { computer: { // 使用对象展开运算符 将 getter 混入 computer 对象中 ...mapGetters ([ 'getMachin...
...mapGetters,mapGetters,...mapState,mapState的用法
lzc2644481789的博客
09-28 2万+
一、简介 本文主要介绍...mapGetters,mapGetters,...mapState,mapState这个四个东西在vue中的用法。可能没有办法像大佬一样把所有用法都精彩的介绍给大家，但是基本用法一定给大家讲清楚。 二、看代码 1....mapGetters和mapGetters： 这两个东西用在computed里面，常规的用法如下图所示： (1)首先是我的store/index.js: (2)接下来是.....
详细分析Vuex中的mapGetters
最新发布
码农研究僧的博客
04-04 2772
用 mapGetters 和 mapState，可以简化组件中对于 Vuex 中状态和 getter 的映射工作，减少了重复的代码书写
vuex 辅助函数mapGetters基本用法
weixin_48927323的博客
07-26 1万+
vuex 辅助函数mapGetters基本用法
vuex----的辅助函数mapState, mapActions, mapMutations用法和混入
最爱松露巧克力
12-17 613
关注IP属地: 江苏2022.03.28 00:14:13字数 287阅读 469。
说说Vuex的getters属性的具体用法
10-17
主要介绍了说说Vuex的getters属性的具体用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vuex之理解Getters的用法实例
08-30
使用`mapGetters`辅助函数可以简化在组件中引用Getters的过程，它将Store中的Getters映射到组件的计算属性中。例如： ```javascript import { mapGetters } from 'vuex' computed: { ...mapGetters([ '...
【Vue】vuex mapState和mapGetters
one or only的博客
07-21 721
【Vue】vuex mapState和mapGetters
mapState映射module中的state
wilL-my的博客
01-27 1673
computed: { ...mapState({ a: state => state.some.nested.module.a, b: state => state.some.nested.module.b }) }, methods: { ...mapActions([ 'some/nested/module/foo', // -> this['some/nested/module/foo']() 'some/nested/module/b.
Vuex中mapState、mapGetters、mapActions、mapMutations的使用
二七二十七的博客
07-24 307
Vuex中mapState、mapGetters、mapActions、mapMutations的使用
vuex中mapGetters的使用及简单实现原理
叶修
03-25 5万+
一.项目中mapGetters 在Vue项目的开发过程中必然会使用到vuex，对vue项目公用数据进行管理，从而解决组件之间数据相互通信的问题，如果不使用vuex，那么一些非父子组件之间的数据通信将会变得极为繁琐。 1.这里首先说下项目中mapGetters的使用 先看下store部分目录结构 index.js文件 在这里插入代码片 ...
VueX mapGetters 获取 Modules 中的Getters
weixin_43959963的博客
12-16 6796
注明 : permission 是你要获取的Modules中的哪一个 (permission 即是 模块名); ...mapGetters("permission",[ 'ReturnRoutes' ]), ...mapGetters("模块名",[ '方法名' ]), 非辅助函数映射获取方式 : this.$store.getters["permission/ReturnRoutes"] this.
快速学会 Vuex 中的 Map 映射方法
weixin_45571672的博客
05-23 710
映射方法 映射方法可以让我们使用 Vuex 的方法是更加简洁会减少大量的代码 ！！！mutations 和 actions 需要映射到 methods 里，而 state 和 getters 则需要映射到 computed 里 一、普通映射 export default new Vuex.Store({ state: { str: "我是映射过去的 state 方法" }, mutations: { fun1(){ console.log("我是映射过去的 muta
Vuex入门（3）—— getters,mapGetters,...mapGetters详解
热门推荐
我不是水哥
08-30 14万+
Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } } 但是如果你的其他组件也要使用这...
定义vuex中的getters
m18697787579的博客
09-27 168
以前在vuex中定义getters通常会使用 下面这种。
Vue知识点整理（五）- vuex（2）- getters配置项、mapState与 mapGetters、mapActions与mapMutations、多组件共享数据
JHY97的博客
04-24 3073
一、getters配置项 1. 概念：当state中的数据需要经过加工后在使用时，可以使用getters加工 2. 在store.js中追加getters配置： ... // 准备getters - 用于将state中的数据进行加工 const getters = { 自定义命名(state){ return ...... } } // 创建并暴露store export default new Vuex.Store({ ... getters })
如何用mapGetter，以及vuex常量
weixin_42429288的1博客
12-21 6177
一、参考 参考大佬闲人王昱珩  白云随风飘   https://blog.csdn.net/baidu_36681154/article/details/79205173   二、实现功能如下： 用户进入登录页面  选择用户登录或者游客模式登录    进入首页 首页中是否为游客，首页显示不同的信息   如果是游客模式       如果是用户登录 三、实现代码 1、状态机vuex...
vuex获取getters
08-30
在使用Vuex时，要获取getters的值，可以通过this.$store.getters来实现。请注意，这里的this是Vue组件中的上下文。 例如，假设你在Vuex store中定义了一个名为user的getter，你可以通过以下方式获取它的值： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十八岁讨厌编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值