2018 June 11 —— improvement; web; js

Vuex

组件数据管理存在的问题:

组件之间存在通信状态下的单向数据流在多组件共享数据时数据流容易被破坏,如某个状态信息的变更影响多组件显示状态的变更,以及多View 视图需要对于同一状态信息做操作变更时,如何组织数据的响应?

解决?

把组件的共享状态抽取出来,以一个全局单例模式管理.在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

数据流变化路径:

Action - 提交 -> Mutation - 变化 -> State - 渲染 -> View (UI) - 产生 Action 事件

何时使用?

VueX 致力于解决大型复杂SPA 中的数据响应问题,在组件外部管理组件状态;

How To Use?

响应式数据管理: 单一状态树,单一对象包含全部的应用顶层状态;

  • Store 数据动态响应 Vue 组件
  • Store 属性的改变必须通过 mutation 的提交,有点像严格模式的 mobx 必须通过 Action 改变 Observerable 属性

State:

利用 computed 计算属性读取 State 状态

Getter:

Mutation:

Action:

Module:


Vue 高阶组件:

组件相关: props / events / slots

关联知识:

展开运算符
  • 多参数函数的apply,省略冗余的 apply null 对象以及参数对象解构
  • 数组的合并 [1,…aar,2]
  • 数组的浅拷贝 […aar]
  • 类数组对象转换
上一篇
下一篇
Loading Disqus comments...
Table of Contents