vuex什么 ?

官方的说法就是 vuex是专门为vue.js应用程序开发的 状态管理模式 。并采用集中式存储 , 管理应用的所有组件的状态 ,并以相同的规则保证状态以一种可预估的方式发生变化。

自己理解的就是 vue提供的  前端数据管理仓库 。

vuex中有五大核心概念 :

1. state

就是为了存储数据而存在的。包括全局所有的状态  (或者叫做数据源)

2.getter   (可以认为是 store的计算属性)   /* 补充:计算属性: 作用就是监听数据的变化 (个人理解), 每当state中的数据发生变化的时候都会重新求取计算属性 ,触发更新相关联的dom节点 */

与计算属性相似 , getter 的返回值会根据自身的依赖被缓存起来 , 只有当他的依赖发生变化时才会被重新计算

getter 被暴露后可以通过 store.getters 进行访问 (在组件中可以通过 this.$store.getters)

参数方面 : getter允许state作为第一个参数,也可以接受其他getter作为第二个参数

3.mutation

/* mutation是改变数据状态state的唯一方法 ,但是要注意的是mutation只支持同步方法 而不支持异步方法 */

关于mutation个人感觉官方文档说的很清楚 :  (地址:https://vuex.vuejs.org/zh-cn/mutations.html)

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

你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法

代码:store.commit('increment')

在组件中可以通过使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

4.action

action类似于mutation  不同在于 :

1.action提交的是mutation (上面有说到 mutation是改变state的唯一方法), 而不是直接变更state(数据状态)

2.action可以包含任意的一部操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

action通过store.dispatch 方法来触发  代码如下:(括号中是要触发的action方法)

store.dispatch('increment')

  分发action

  在组件中分发action;

  在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store

5.module

module是为了解决 当所有状态都聚集到一个大对象中时 , store对象会变得臃肿问题 而存在的。

vuex

推荐文章:https://zhuanlan.zhihu.com/p/24357762  (个人感觉说的非常通俗易懂好理解)

转载于:https://www.cnblogs.com/wangrenmeng/p/8995799.html

vuex , 简单入(liao)门(jie)相关推荐

  1. 《深度学习入门一》一入侯门深似海,深度学习深几许 2017-06-09 云栖社区 摘要: 当你和女朋友在路边手拉手一起约会的时候,你可曾想,你们之间早已碰撞出了一种神秘的智慧–深度学习。恋爱容易,相

    <深度学习入门一>一入侯门深似海,深度学习深几许 2017-06-09 云栖社区 摘要: 当你和女朋友在路边手拉手一起约会的时候,你可曾想,你们之间早已碰撞出了一种神秘的智慧–深度学习.恋 ...

  2. python是什么类型的语言-Python是什么?简单了解pythonp-入门

    原标题:Python是什么?简单了解pythonp-入门 简单了解python Python语言特色 1. Python是一门解释性语言 解释性语言:在系统中运行时需要使用解释器(如:php.java ...

  3. 前端简单入门第十八讲 使用jQuery实现表格的隔行换色

    还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...

  4. 一入侯门深似海,从此萧郎是路人

    <赠婢> 唐:崔郊 公子王孙逐后尘,绿珠垂泪滴罗巾. 一入侯门深似海,从此萧郎是路人. 诗的首两句应该换个顺序翻译,绿珠是美女佳人的代称,泛指容貌姣好的女子,可是这么美丽的女子却在偷偷的哭 ...

  5. vuex简单入门:singer实例创建以及读写全过程

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 原理图  对于原理图 ...

  6. Android 入个门

    文章原载于我的个人博客,欢迎来访. 整理了一些Android很经典的几个问题. 其实是选修课作业,顺道吹一吹这门课( 附件:部分源代码 1.Android应用的基本组件有哪些? Activity:应用 ...

  7. 2020了,还要学JSP嘛?入个门呗!毕竟Servlet亲兄弟~

    目录 1.什么是JSP 2.JSP原理 3.JSP基础语法 jsp表达式 jsp脚本片段 jsp声明 jsp注释 4.JSP指令 5.JSP行为 6.9大内置对象 7.EL表达式 格式 变量 [ ]与 ...

  8. python编程入门p-Python是什么?简单了解pythonp-入门

    简单了解python Python语言特色 1. Python是一门解释性语言 解释性语言:在系统中运行时需要使用解释器(如:php.java) 编译性语言:在系统中运行不需要解释器,可以直接运行(如 ...

  9. 来,Consul 服务发现入个门(一看就会的那种)

    前言 在微服务架构中,对于一个系统,会划分出多个微服务,而且都是独立开发.独立部署,最后聚合在一起形成一个系统提供服务.当服务数量增多时,这些小服务怎么管理?调用方又怎么能确定服务的IP和端口?服务挂 ...

  10. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

最新文章

  1. 一文应用 AOP | 最全选型考量 + 边剖析经典开源库边实践,美滋滋
  2. java核心编程视频教学
  3. UVa 1393 (容斥原理、GCD) Highways
  4. 机器学习知识点(九)BP神经网络Java实现
  5. boost::contract模块实现move的测试程序
  6. sdk开发包怎么使用_怎么使用 Buildroot 构建根文件系统?
  7. MP law simulation
  8. 初识循环神经网络(RNN)
  9. 阿里云CentOs 6.4 yum报错Couldn't resolve host'xx
  10. 【Hoxton.SR1版本】Spring Cloud Gateway之如何进行限流
  11. 软考数据库系统工程师复习资料(完全版)
  12. Go语言适合做什么?
  13. GetShell的姿势总结
  14. SCANV团队提供APPCMS安全漏洞独立补丁
  15. 【机器学习】逻辑回归案例一:保险与年龄之间关系分析
  16. java使用免费日期API获取当年节假日
  17. 7 11 藏尾诗c语言,为你写诗:11种杂体诗,汉语太神奇
  18. Oracle数据库表空间不足 ORA-01653:unable to extend table 表名称 by 8192 in tablespace 表空间名称
  19. Python 机器学习工具库
  20. 【干货】Excel根据条件变换颜色

热门文章

  1. 人脸验证(三)--FaceNet
  2. 图像形状特征(二)--Hu距
  3. 运动目标跟踪(三)--搜索算法优化搜索方向之Meanshift
  4. OSError: [WinError 126] 找不到指定的模块。【专治疑难杂症】
  5. 周期性行业是什么意思_什么样的股票适合长期持有?股票知识学习
  6. 【C++入门】C++ string类
  7. git remote命令入门
  8. kafka--Struct Streaming--hdfs案例
  9. Material Design控件使用
  10. 当攻击者采用新型逃避技术——“域遮蔽” 企业该如何应对?