Vuex之理解Getters的用法

Posted 2023-01-15 面条请不要欺负汉堡

一.什么是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>

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