<强> 1。什么是getter
在介绍状态中我们了解到,在<代码> 仓存储库里,<代码> 状态就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到<代码> 中计算。但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是<代码> getter>
<强> 2。如何使用
定义:我们可以在<代码> 中存储定义<代码> getter>
const getter={风格:状态=比;state.style}
传参:定义的<代码> getter> 商店。getter> getter>
使用:
计算:{
doneTodosCount () {
返回$ store.getters.doneTodosCount}。
之前
<强> 3。mapGetters
<代码> mapGetters 辅助函数仅仅是将<代码> 中存储的<代码> getter 映射到局部计算属性中,用法和<代码> mapState>
从“vuex”进口{mapGetters}
计算:{//使用对象展开运算符将getter混入计算对象中
……mapGetters (
“doneTodosCount”,
“anotherGetter”)}//给getter属性换名字
mapGetters ({//映射。doneCount为store.getters.doneTodosCount
doneCount:“doneTodosCount”
}）
之前
<强> 4。源码分析
<代码> wrapGetters 初始化<代码> getter> 存储表示当前的商店<代码> 实例,<代码> moduleGetters 当前模块下所有的<代码> getter ,<代码> modulePath>
函数的wrapGetters(存储、moduleGetters modulePath) {
种(moduleGetters)。forEach (getterKey=比;{//遍历先所有的getter
const rawGetter=moduleGetters [getterKey]
如果(store._wrappedGetters [getterKey]) {
控制台。错误(“[vuex]复制getter关键:$ {getterKey} ')//getter的关键不允许重复,否则会报的错
返回
}
商店。_wrappedGetters [getterKey]=函数“wrappedGetter”(存储{//将每一个getter包装成一个方法,并且添加到store._wrappedGetters对象中,
返回rawGetter (//执行getter的回调函数,传入三个参数,(本地状态,存储getter rootState)
getNestedState(商店。状态,modulePath),//本地状态//根据路径查找状态上嵌套的状态
store.getters,//存储上所有的getter
store.state//根状态)}})
}//根据路径查找状态上嵌套的状态
函数的getNestedState(状态,路径){
返回path.length
& # 63;路径。减少((状态、关键)=比;(例子),状态}):
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
