vue getters用法,vuex中getter的用法
在商店仓库中，状态用于存储数据。如果很多组件使用这些过滤后的数据，我们可以提取并共享它吗？这就是吸气剂的作用。我们可以将getters视为存储的计算属性。本文将详细介绍getters的使用教程，有需要的可以参考一下。
目录
简介说明官网getters概述说明源码用法示例测试
简介
说明
本文结合实例介绍了Vuex的五大核心之一：getters。
官网
Getter Vuex
参考API Vuex
getters概述
说明
Getters是存储的计算属性，可以计算状态。就像计算属性一样，getter的返回值会根据其依赖关系进行缓存，只有当其依赖关系值发生变化时才会重新计算。
虽然计算属性也可以在组件内部完成，但是getters可以在多个组件之间重用。如果一个状态只在一个组件中使用，那么可以省略getters。
来源
有时候我们需要从store中的状态派生出一些状态，比如过滤列表和计数：
计算值：{
donetodoccount(){
归还这个。$ store . state . todos . filter(todo=todo . done)。长度
}
}
如果多个组件需要使用这个属性，我们要么复制这个函数，要么把它提取到一个共享函数中，然后在几个地方导入(两种方式都不理想)。Getter就是为了解决这个问题而产生的。
用法
直接使用
这个。$store.getters计算属性名//而不考虑模块
This.store.getters [模块名/计算属性名]//子模块
地图获取者
从“vuex”导入{ mapGetters }
导出默认值{
计算值：{
//不考虑模块
.mapGetters([计算属性名])
//子模块，不重命名计算属性。
.mapGetters(模块名，[计算属性名])
//子模块，重命名计算属性。
.mapGetters(模块名，{ 新计算属性名:旧计算属性名 })
}
}
示例
密码
CouterStore.js
从“Vue”导入Vue；
从“Vuex”导入Vuex；
vue . use(Vuex)；
const counterStore=new Vuex。商店(
{
状态：{
计数：10
},
getters: {
双重计数(州){
返回state . count * 2；
}
}
}
);
导出默认counterStore
Parent.vue
模板
div class=outer
H3父组件/h3
组件b/组件b
/div
/模板
脚本
从导入组件b。/ComponentB ；
导出默认值{
姓名：家长，
组件：{ComponentB}，
}
/脚本
样式范围。外部{
边距：20px
边框：2px纯红；
填充：20px
}
/风格
组件B.vue
模板
div class=容器
h3组件B/h3
计数器的值：{{thisCount}}/div
div计数器的两倍：{{thisDoubleCount}}/div
/div
/模板
脚本
导出默认值{
计算值：{
thisCount() {
归还这个。$ store . state . count；
},
thisDoubleCount() {
归还这个。$ store . getters . double count；
},
}
}
/脚本
样式范围。容器{
边距：20px
边框：2px纯蓝；
填充：20px
}
/风格
路由(router/index.js)
从“vue”导入Vue
从“vue路由器”导入路由器
导入父项自./components/Parent ；
Vue.use(路由器)
导出默认新路由器({
路线：[
{
路径：“/parent”，
姓名：家长，
组件：父组件，
}
],
})
测试
访问：3358本地主机：8080/#/家长
本文关于解释Vuex中getters的使用教程到此结束。有关Vuex吸气剂的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。