getters： 有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？ 过滤的数据会存放到$store.getters对象中。该方法为获取vuex中的数据
大家看这样一段代码：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
name: "Jack Chan",
age: 18,
},
mutations: {
//接受页面参数，改变state中数据
},
getters: {
age: function (state) {
return state.age;//返回state数据中的年龄。
}
},
actions: {}
});
export default store
vue如下：
<template>
<div>
{{age}}
</div>
</template>
<script>
import store from '../../../utils/store';
export default {
components: {
},
data () {
return {}
},
computed: {
age: function () {
return store.getters.age;
}
},
}
</script>
<style scoped>
</style>
打印结果为18,store.getters.age就是读取的getters过滤后的数据。
