vuexgetters

Posted 2020-12-29 bgwhite

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过滤后的数据。