标签：输出 default nbsp pst maps code UNC fun 使用
一.什么是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的方法名
标签：输出 default nbsp pst maps code UNC fun 使用
原文地址：https://www.cnblogs.com/xtjatswc/p/10324917.html
