Vue进阶（幺肆捌）：Vuex 辅助函数详解_vuex的有哪些辅助函数 有什么用

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

一、前言

一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。显然，采取这样的数据访问方式，代码略显繁杂，辅助函数为此应运而生。

二、辅助函数

通过辅助函数mapGetters、mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就变得非常方便。

state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）

三、如何使用辅助函数

1. 需要在当前组件中引入Vuex。
2. 通过Vuex来调用辅助函数。

四、辅助函数如何去映射 vuex.store 中的属性

4.1 mapState: 把 state 属性映射到 computed 身上

computed:{
   ...Vuex.mapState({
      input:state=>state.inputVal,
      n:state=>state.n
  })   
}

简写形式如下：

import { mapGetters } from 'vuex'
computed:{
	...mapGetters(['input', 'n'])
}

state：用来存储公共状态, state中存储的数据都是响应式的。

响应式原因：state里面有getters、setters方法；data中的数据也是响应式的，因为里面也有getters和setters方法。

在computed属性中来接收state中的数据,接收方式有2种（数组和对象，推荐对象）.

优点：

• 本身key值是别名，要的是val值，key的值a 和 val="a"一样就行，随意写。减少state里面长的属性名。
• 可以在函数内部查看state中的数据，数组方式的话，必须按照state中的属性名。

  computed:Vuex.mapState({
    key:state=>state.属性
  })

如果自身组件也需要使用computed的话，通过解构赋值去解构出来。

  computed:{
    ...Vuex.mapState({
       key:state=>state.属性
    })
  }

4.2 mapAcions：把 actions 方法映射到 methods 中

methods:{
    ...Vuex.mapActions({
        add:"handleTodoAdd",    //val为actions里面的方法名称
        change:"handleInput"     
    })
}

简写形式如下：

import { mapActions } from 'vuex'
methods:{  
	...mapActions(['add', 'change'])
}

add、change为action方法别名，直接代用add和change方法就行，不过要记得在actions里面做完数据业务逻辑的操作。

等价于如下的函数调用，

methods: {
	handleInput(e){           
		let val = e.target.value;
		this.$store.dispatch("handleInput",val )
	},
	handleAdd(){
		this.$store.dispatch("handleTodoAdd")
	}
}

actions里面的函数主要用来处理异步操作以及一些业务逻辑,每一个函数里面都有一个形参，这个形参是一个对象，里面有一个commit方法，这个方法用来触发mutations里面的方法。

4.3 mapMutations：把 mutations 里面的方法映射到 methods 中

只是做简单的数据修改（例如n++），它没有涉及到数据处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法修改数据。

methods:{
    ...Vuex.mapMutations({
        handleAdd:"handlMutationseAdd"
    })
}

简写形式如下：

import { mapMutations} from 'vuex'
methods:{  
	...mapMutations(['handleAdd'])
}

mutations里面的函数主要用来修改state中的数据。mutations里面的所有方法都会有2个参数，一个是store中的state，另外一个是需要传递的参数。

理解state、actions、mutations，可以参考MVC框架。

• state看成一个数据库，只是它是响应式的，刷新页面数据就会改变；
• actions看成controller层，做数据的业务逻辑；
• mutations看成model层，做数据的增删改查操作。

4.4 mapGetters:把 getters 属性映射到 computed 身上

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总