getter方法的作用 vuex_Vuex的工作流程

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

vuex有哪几种属性

有五种,分别是State、 Getter、Mutation 、Action、Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法,同步!

actions => 像一个装饰器,包裹mutations,使之可以异步。

modules => 模块化Vuex

a) 在vue组件里面,通过dispatch来触发actions提交修改数据的操作。

b) 然后再通过actions的commit来触发mutations来修改数据。

c) mutations接收到commit的请求,就会自动通过Mutate来修改state(数据中心里面的数据状态)里面的数据。

d) 最后由store触发每一个调用它的组件的更新

Vuex的作用:项目数据状态的集中管理,复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。

Vue组件(action里面的dispatch)---》actions(方法commit)---》mutations(Mutate)---》state(getter)---》store更新所有调用vuex的组件(Vue Component组件)

21001a554214a14d92570bd7bb7c291e.png
mapState辅助函数
computed: mapState([// 映射 this.count 为 store.state.count'count'
])相当于
computed:{count(){ return this.$store.state.count }
}computed: mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`// countAlias : state => state.count,countAlias: 'count',// 为了能够使用 `this` 获取局部状态,必须使用常规函数countPlusLocalState (state) {return state.count + this.localCount}
})
通过属性访问的:
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)},doneTodosCount: (state, getters) => {return getters.doneTodos.length}}
})//使用方法
computed: {doneTodosCount () {return this.$store.doneTodos  // [{ id: 1, text: '...', done: true }]}
}还有一种情况,自带getter参数的
//使用方法
computed: {doneTodosCount () {return this.$store.getters.doneTodosCount //2}
}
通过方法访问的:(注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果)
const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)}}
})//使用方法
computed: {doneTodosCount () {return this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }}
}
mapGetters函数
import { mapGetters } from 'vuex'export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}
//相当于
export default {// ...computed: {doneTodosCount:this.$store.getters.doneTodosCount,anotherGetter :this.$store.getters.anotherGetter }
}
mutation特点

每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++}}
})// ...
mutations: {increment (state, n) {state.count += n}
}store.commit('increment', 10)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489351.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从生态、业绩角度分析芯片行业

来源:国信证券生态角度:合作伙伴、底层架构、高级人才、EDA 软件技术的发展是从点到面,逐渐复杂。产业的发展也是从单一点突破,最后形成上下游产业链。伴随着技术变复杂和产业链延伸,市场形成稳定的生态结构&#xff0…

tensorflow计算网络占用内存_详细图解神经网络梯度下降法(tensorflow计算梯度)...

1.什么是梯度各个方向的偏微分组成的向量​ 举例说明,z对x的偏微分和对y的偏微分如下,则梯度是(-2x,2y)的这样一个向量​ 在光滑连续函数的每个点上,都可以计算一个梯度,也就是一个向量&#xf…

关于数据中台系统,需要了解哪些技术?

来源:国家建材大数据研究中心今天让我们全面解读中台,包括企业为什么要平台化,目前中台都有哪些形式,实施中台系统的优势、面临的问题以及建议都有哪些?中台这个概念早期是由美军的作战体系演化而来的,技术…

python for循环连续输入五个成绩判断等级_Python条件循环判断

1.条件判断语句 Python中条件选择语句的关键字为:if 、elif 、else这三个。其基本形式如下: 1 2 3 4 5 6 7 8 9 age_of_cc 27 age int(input("guessage:")) if age age_of_cc: print("Yes,you got it!") elif age > age_of_cc: p…

人工智能的下半场,一定少不了自监督学习

来源:AI科技评论作者 | Lilian Wang 王荔编译 | MrBear对于给定的任务,在拥有足够的标签的情况下,监督式学习可以很好地解决该问题。想要得到好的性能,往往需要大量的数据标签,但是手动收集数据的成本很高(…

bert 多义词_BERT之后,GLUE基准升级为SuperGLUE:难度更大

选自Medium作者:Alex Wang等机器之心编译参与:PandaBERT 等模型的进展已让 GLUE 基准在新模型的评估方面日渐乏力,为推动 NLP 技术的进一步发展,有必要对 GLUE 指标进行更新。为此,纽约大学、Facebook 人工智能研究所、…

thread.sleep是让哪个线程休眠_Java多线程:多线程基础知识

点击上方☝SpringForAll社区 轻松关注!及时获取有趣有料的技术文章本文来源:https://www.cnblogs.com/ITtangtang/p/7602363.html一、线程安全性定义:多个线程之间的操作无论采用何种执行时序或交替方式,都要保证不变性条件不被破…

整个领域没了!学术界有史以来最大的丑闻

来源:中大科技处10月15日,学术界发生了一件大事。哈佛终身教授学术造假,31篇文献被撤,无数研究化为泡影……哈佛一次性从各类顶尖期刊上撤稿了31篇论文,整个心肌干细胞相关的研究被认定为“从一开始就基于欺诈性数据”…

thinkPHP-空操作

空操作 当访问的方法不存在时&#xff0c;可以定义一个empty方法来避免空操作 function _empty(){echo "网页不存在&#xff0c;请检查地址信息";} 这样当访问不存在的方法时就会显示以上信息 当访问的控制器不存在时&#xff0c;可以定义一个空操作器 <?php nam…

python3 面向对象_Python3 面向对象

Python和C都是一门面向对象的语言&#xff0c; 面向对象技术简介 类(Class):用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。比如 f file()##创建了一个类(file())的对象f 类变量&#xff1a;类变量在整个实例的对象…

口腔ct重建服务器原理,牙科CT是什么?牙科CT的原理及优势介绍

原标题&#xff1a;牙科CT是什么&#xff1f;牙科CT的原理及优势介绍牙科CT是什么&#xff1f;牙科CT&#xff0c;又称口腔CT&#xff0c;是一种新型牙科类仪器&#xff0c;它可以从三维角度对口腔部组织情况进行扫描检查。牙科CT在业界被誉为神奇的“慧眼”&#xff0c;它犹如…

机器学习奠基人Michael Jordan:下代技术是融合经济学,解读2项重要进展

来源&#xff1a; 北京智源人工智能研究院2019年11月1日北京智源大会全体大会及闭幕式上&#xff0c;被誉为“机器学习之父”的加州大学伯克利教授、智源研究院学术顾问委员会委员 Michael I.Jordan 做了题为《决策与情境&#xff1a;基于梯度的博弈均衡求解方法》&#xff08;…

matlab 带有下标的赋值维度不匹配_远见另类资产管理体系下的核心系统搭建

另类资产管理体系下的信息化建设&#xff0c;或许是小众领域中的更小众话题&#xff0c;但仍值得讨论。很多基金公司、投资公司或资产管理公司都搭建了各种大大小小的应用系统&#xff0c;如OA系统、财务系统、CRM系统等&#xff0c;但对于上系统的价值&#xff0c;不仅很难量化…

cfree运行程序错误的原因_Python入门教程 | 第 8 章 错误、调试和测试

第八章 错误、调试和测试在程序运行过程中&#xff0c;总会遇到各种各样的错误。有的错误是程序编写有问题造成的&#xff0c;比如本来应该输出整数结果输出了字符串&#xff0c;这种错误我们通常称之为bug&#xff0c;bug是必须修复的。有的错误是用户输入造成的&#xff0c;比…

我的世界服务器物品id错误,我的世界错误代码,怎么弄

我的世界错误代码&#xff0c;怎么弄0xu1125yuan2017.07.24浏览323次分享举报1.Minecraft:[16:05:37][Clientthread/FATAL][NotEnoughItemsFingerprintVerification]:ThefingerprintformodNotEnoughItemsisinvalid!Expected:f1850c39b2516232a2108a7bd84d1cb5df9... 1.Minecraf…

今日头条CEO朱文佳:新一代搜索引擎已经来了

来源&#xff1a;今日头条11月27日&#xff0c;今日头条CEO朱文佳在36kr wise大会上谈及头条搜索。在他看来&#xff0c;要做好搜索&#xff0c;有三件事最重要。首先是技术&#xff0c;技术决定搜索的体验&#xff1b;其次是内容&#xff0c;内容是搜索的根本&#xff1b;最后…

串口打印怎么使用】_爱普生打印机怎么使用 爱普生打印机使用方法【详解】...

市面上的打印机品牌有很多&#xff0c;其中就有爱普生打印机&#xff0c;这个品牌的打印机是在上个世纪的四十年代成立的&#xff0c;并且爱普生这款打印机逐渐深入我们的生活&#xff0c;一般我们很多都会使用爱普生打印机来打印资料或者是下载各种工作材料&#xff0c;那么你…

日益谨慎的谷歌AI,会在自我限制中越走越慢吗?

来源&#xff1a;wired为了防止技术被滥用&#xff0c;谷歌对新推出的人脸识别服务进行了限制&#xff0c;但这种限制有时候反而会让竞争对手抢得市场先机。谷歌之所以成为今天的谷歌&#xff0c;是因为它不断创造先进的新技术&#xff0c;并将这些技术向所有人开放。大型企业和…

用jsp实现右导航窗格_手机导航如何投放到汽车中控屏?建议用这2种办法,轻松实现同屏...

对于我们许多的司机来说&#xff0c;虽然车上有车载导航&#xff0c;但是出于个人习惯&#xff0c;我们很多人还是习惯用手机导航&#xff0c;由于手机导航它的定位较为精准&#xff0c;而且使用起来比较方便&#xff0c;所以说更受司机朋友的青睐&#xff0c;但是有一个毛病就…