Getter | Vuex

Vuex 允许我们在store 中定义“getter”（可以认为是store 的计算属性）。

注意. 从Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。

这是一个 ... 指南API参考更新记录v4.xv3.x选择语言English简体中文日本語PortuguêsGitHub介绍Vuex是什么?安装开始核心概念StateGetter通过属性访问通过方法访问mapGetters辅助函数MutationActionModule进阶项目结构组合式API插件严格模式表单处理测试热重载TypeScript支持迁移指南从3.x迁移到4.0Getter#在Scrimba上尝试这节课有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：computed:{ doneTodosCount(){ returnthis.$store.state.todos.filter(todo=>todo.done).length } } 如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。

注意从Vue3.0开始，getter的结果不再像计算属性一样会被缓存起来。

这是一个已知的问题，将会在3.2版本中修复。

详情请看PR#1878。

Getter接受state作为其第一个参数：conststore=createStore({ state:{ todos:[ {id:1,text:'...',done:true}, {id:2,text:'...',done:false} ] }, getters:{ doneTodos:(state)=>{ returnstate.todos.filter(todo=>todo.done) } } }) 通过属性访问#Getter会暴露为store.getters对象，你可以以属性的形式访问这些值：store.getters.doneTodos//->[{id:1,text:'...',done:true}] Getter也可以接受其他getter作为第二个参数：getters:{ //... doneTodosCount(state,getters){ returngetters.doneTodos.length } } store.getters.doneTodosCount//->1 我们可以很容易地在任何组件中使用它：computed:{ doneTodosCount(){ returnthis.$store.getters.doneTodosCount } } 注意，getter在通过属性访问时是作为Vue的响应式系统的一部分缓存其中的。

通过方法访问#你也可以通过让getter返回一个函数，来实现给getter传参。

在你对store里的数组进行查询时非常有用。

getters:{ //... getTodoById:(state)=>(id)=>{ returnstate.todos.find(todo=>todo.id===id) } } store.getters.getTodoById(2)//->{id:2,text:'...',done:false} 注意，getter在通过方法访问时，每次都会去进行调用，而不会缓存结果。

mapGetters辅助函数#mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性：import{mapGetters}from'vuex' exportdefault{ //... computed:{ //使用对象展开运算符将getter混入computed对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', //... ]) } } 如果你想将一个getter属性另取一个名字，使用对象形式：...mapGetters({ //把`this.doneCount`映射为`this.$store.getters.doneTodosCount` doneCount:'doneTodosCount' }) StateMutation