【vuex】理解Getters

什么是getters

在介绍state中咱们了解到，在Store仓库里，state就是用来存放数据，如果对数据进行处理输出，好比数据要过滤，通常咱们能够写到computed中。可是若是不少组件都使用这个过滤后的数据，好比饼状图组件和曲线图组件，咱们是否能够把这个数据抽提出来共享？这就是getters存在的意义。咱们能够认为，【getters】是store的计算属性。

操做

经过属性访问，经过方法访问：

在storestore.js

[html] view plain copy
import Vue from 'vue'  
import Vuex from 'vuex'  
Vue.use(Vuex)  
  
export default new Vuex.Store({  
    //建立一个对象来保存应用启动时的初始状态  
    state:{  
         // 应用启动时， count置为0  
        count:0,  
        todos: [  
            { id: 1, text: '水果类', done: true },  
            { id: 2, text: '苹果', done: true },  
            { id: 3, text: '苹果', done: false}  
        ]  
    },  
    getters: {  
        doneTodos: state => {//经过方法访问  
          return state.todos.filter(todo => todo.done)  
        },  
        doneTodosCount: (state, getters) => {//经过属性访问  
            return getters.doneTodos.length  
        }  
    }  
})

vueDome.vue

<template>  
    <div>  
        <P>经过属性访问：{{doneTodosCount}}</p>  
        <P>经过方法访问：{{todos}}</p>  
    </div>  
</template>  
  

/*  
### mapState 辅助函数  
当映射的计算属性的名称与 state 的子节点名称相同时，  
咱们也能够给 mapState 传一个字符串数组  
*/  
import { mapState } from 'vuex'  
export default {  
    computed:{  
        todos:function() {  //经过方法访问  
            return this.$store.getters.doneTodos;  
        },  
        doneTodosCount () {  
            return this.$store.getters.doneTodosCount  
        }  
    }  
}  
</script>

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

<template>  
    <div>  
        <h4>测试1：Count is {{count}}</h4>  
        <P>经过属性访问：{{doneTodosCount}}</p>  
        <P>经过方法访问：{{doneTodos}}</p>  
    </div>  
</template>  
<script>  
import {mapGetters} from 'vuex'  
export default {  
    computed:{  
        count(){  
            return this.$store.state.count  
        },  
        ...mapGetters([  
            'doneTodos',  
            'doneTodosCount'  
        ])  
    }  
}  
</script>

效果同上。分析：
1...mapGetters表示// 使用对象展开运算符将 getters 混入 computed 对象中

2.mapGetters里面的都是store.js里面的getters的方法名