Vuex 允许我们在store中定义“getter”(可以认为是store的计算属性)。就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
getters的作用
对于getters的理解主要作用是对state属性进行计算,可以理解类似于Vue中computed。接下来让我通过一个例子如何使用这两个功能的。
还是以我们上一讲的累加器为例,在getter.js中增加getCount,内容如下:
1
2
3
4
5
6
7
8
9
10
|
const getters = {
getNum (state) {
return
state.num
},
getCount (state) {
return
state.count
}
}
export
default
getters
|
在组件中如何使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<template>
<div
class
=
"getter"
>
{{ count }}
<button @click=
"add"
>ADD State</button>
</div>
</template>
<script>
export
default
{
data () {
return
{}
},
computed: {
count () {
return
this
.$store.getters.getCount
}
},
methods: {
add () {
this
.$store.commit(
'add'
)
}
}
}
</script>
|
this.$store调用
1
|
this
.$store.getters.getCount
|
引用store来调用
1
2
3
|
import
store from
'@/store/store.js'
store.getters.getCount
|
mapGetters 辅助函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template>
<div
class
=
"getter"
>
{{ getCount }}
<button @click=
"add"
>ADD State</button>
</div>
</template>
<script>
import
{ mapGetters } from
'vuex'
export
default
{
data () {
return
{}
},
computed: {
...mapGetters([
'getCount'
])
},
methods: {
add () {
this
.$store.commit(
'add'
)
}
}
}
</script>
|