(文章目录)
一、前言
一般情况下,如果需要访问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
属性,属性值都是函数)
三、如何使用辅助函数
-
需要在当前组件中引入
Vuex
。 -
通过
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 身上
computed:{
...Vuex.mapGetters({
NumN:"NumN"
})
}
简写形式如下:
import { mapGetters} from 'vuex'
methods:{
...mapGetters(['NumN'])
}
getters
类似于组件里面computed
,同时也监听属性的变化,当state
中的属性发生改变的时候就会触发getters
里面的方法。getters
里面的每一个方法中都会有一个参数 state
。
4.5 modules属性: 模块
把公共的状态按照模块进行划分。
1、每个模块都相当于一个小型的Vuex
;
2、每个模块里面都会有state
getters
actions
mutations
;
3、切记在导出模块的时候加一个 namespaced:true
主要的作用是将每个模块都有独立命名空间;
4、namespace:true
在多人协作开发的时候,可能子模块和主模块中的函数名字会相同,这样在调用函数的时候,相同名字的函数都会被调用,就会发生问题。为了解决这个问题,导出模块的时候要加namespace:true
.
那么怎么调用子模块中的函数呢?假如我的子模块名字为todo.js。 函数名字就需要改成todo/函数名字
。输出模块后的store
实例如下图所示:
可以看到模块化后,
store
实例的state
属性访问方式也改变了,this.$store.state.todo.inputVal
可以简单总结一下辅助函数通过vuex使用,比喻成映射关系为:
mapState/mapGettes--->computed
;mapAcions/mapMutations---->methods
五、命名空间
模块开启命名空间后,享有独自的命名空间。示例代码如下:
export default {
namespaced: true,
....
}
mapState
、mapGetters
、mapMutations
、mapActions
第一个参数是字符串(命名空间名称),第二个参数是数组(不需要重命名)/对象(需要重命名)。
mapXXXs('命名空间名称',['属性名1','属性名2'])
mapXXXs('命名空间名称',{
'组件中的新名称1':'Vuex中的原名称1',
'组件中的新名称2':'Vuex中的原名称2',
})
六、拓展阅读
-
《Vue进阶(二十七):Vuex之getters,mapGetters,...mapGetters详解》
-
《Vue进阶(四十三):Vuex之Mutations详解》