vue的辅助函数怎么使用
本篇内容主要讲解“vue的辅助函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue的辅助函数怎么使用”吧!
vue的辅助函数有:1、mapState,将全局状态管理的state值映射到组件的计算属性;2、mapGetters,将全局状态管理的getters值映射到组件的计算属性;3、mapActions;4、mapMutations。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
1.Vue的辅助函数
mapState、mapGetters、mapActions、mapMutations
mapState 将全局状态管理的state值映射到组件的计算属性
mapGetters 将全局状态管理的getters值映射到组件的计算属性
mapMutation 将mutation的值映射到方法里
mapActions 将actions里的值映射到方法里
2.mapState 辅助函数
mapState
是什么?官方的解释是:
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键
当初在看到这个解释的时候可能觉得非常空洞,难以理解。生成计算属性是什么?少按几次键???
mapState是state的语法糖,什么是语法糖?我对语法糖的理解就是,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好,更好的操作"?,用了一段时间后,真香!
3.如何使用
在使用mapState之前,要导入这个辅助函数。
import { mapState } from 'vuex'
使用方式
<template>
<div id="example">
<button @click="decrement">-</button>
{{count}}
{{dataCount}}
<button @click="increment">+</button>
<div>{{sex}}</div>
<div>{{from}}</div>
<div>{{myCmpted}}</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {
str: '国籍',
dataCount: this.$store.state.count
}
},
computed: mapState({
count: 'count', // 第一种写法
sex: (state) => state.sex, // 第二种写法
from: function (state) { // 用普通函数this指向vue实例,要注意
return this.str + ':' + state.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.str
}
}),
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
}
}
}
</script>
computed
可以接收mapState
函数的返回值,你可以用代码中的三种方式去接收store中
的值,具体可以看注释。
如果我在后面想使用mapState怎么办?其实很简单
//之前的computed
computed:{
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
........
}
//引入mapState辅助函数之后
computed:mapState({
//先复制粘贴
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
......
//再维护vuex
count:'count'
})
4.对象展开运算符
…mapState并不是mapState的扩展,而是…对象展开符的扩展 。
//之前的computed
computed:{
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
........
}
//引入mapState辅助函数之后
computed:{
//原来的继续保留
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
......
//再维护vuex
...mapState({ //这里的...不是省略号了,是对象扩展符
count:'count'
})
mapState
、mapGetters
、mapActions
、mapMutations
的使用方法大同小异。。。
到此,相信大家对“vue的辅助函数怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341