vuex getter的用法

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



通过属性访问:2通过方法访问: [{ id: 1, text: '水果类', done: true },{ id: 2, text: '苹果', done: true }]


复制代码

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值