Vuex入门学习之Getter详解
一、引入Getter
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getter 就类似于我们定义 java 实体类中的 getter方法。
Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
二、通过属性访问 getter
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作为第二个参数：
getters: {
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我们可以很容易地在任何组件中使用它：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。
三、通过方法访问
你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters: {
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
四、mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter'
])
}
}
如果你想将一个 getter 属性另取一个名字，使用对象形式：
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
到此这篇关于Vuex入门学习之Getter详解的文章就介绍到这了,更多相关Vuex的Getter内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue全局接入百度地图的实现示例，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)
本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
本文通过图文并茂的形式给大家介绍了vue-cli + sass 的正确打开方式，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-10-10
在大部分实际场景中,我们都可以构建单页应用来进行项目的开发和迭代,然而对于项目复杂度过高或者页面模块之间差异化较大的项目,我们可以选择构建多页应用来实现,那么什么是多页应用,本文就给大家介绍了Vue使用pages构建多页应用的实现步骤2024-12-12
这篇文章主要介绍了vue项目的访问端口及其设置方式，具有很好的参考价值，希望对大家有所帮助。2022-10-10
在Vue3.5版本中,响应式Props的解构功能正式转正,该功能允许即使在解构后也不丢失响应性,文通过编译阶段的处理,如何保持解构后的props变量仍保持响应性,编译过程中的defineProps宏函数处理,通过AST和上下文操作实现变量替换,从而让解构后的变量在运行时维持响应式状态2024-09-09
这篇文章主要给大家介绍了关于vue如何动态实时的显示时间，以及vue时间戳 获取本地时间实时更新的相关资料，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
vue3+elementplus基于el-table-v2封装公用table组件详细代码
在日常开发后端管理系统项目中,用于展示数据多会用表格进行展示,下面这篇文章主要给大家介绍了关于vue3+elementplus基于el-table-v2封装公用table组件的相关资料,需要的朋友可以参考下2023-12-12
element-plus的el-table自定义表头筛选查询功能实现
这篇文章主要介绍了element-plus的el-table自定义表头筛选查询功能实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要介绍了vue使用echarts如何实现双柱状图和双y轴的柱状图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论