Vuex之理解Getters的用法

我会带着你远行 2021-09-15 02:24 441阅读 0赞

一.什么是getters

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

二.操作

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

在store\\store.js

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

![20180326103949496][]

三.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的方法名

[20180326103949496]: /images/20210813/c72a86546b12454a92433f5a162b3187.png