介绍

本文是学习vuex时做的笔记,所有笔记内容请看 vuex学习笔记

数据管理模式

在正式开始介绍Vuex之前,有必要介绍一下数据管理模式的前世今生。
当你在开发应用程序时,你一定会分解出很多组件进行开发,而各个组件之间想必在逻辑上多少是有关系的。那么组件之间的“通信”,就成了待解决问题。以前我们试图用事件广播来做,但随之而来的问题是,在应用不断的扩展、变化中,事件变得越来越复杂,越来越不可预料,以至于越来越难调试,越来越难追踪错误。这当然不是我们想要的,我们希望应用的各个部分都易维护、可扩展、好调试、能预测。于是数据管理模式应运而生。
1、数据管理模式
图1是最简单的组件关系,b是a的子组件,而c是b的子组件。在我们不引入任何数据管理模式之前,c组件要拿到a组件的数据只能由a先传给b,在由b传给c。如果组件树变得复杂,可想而知这将是一场灾难。看似严谨的父子结构其实严格限制了数据的流动方式。
1、数据管理模式
图2是最简单的数据管理模式,所有数据将统一交给全局store来管理。a和c组件现在直接修改store里的数据,并且通过mapState从store中抓取自己感兴趣的数据到自己的组件中。而b组件,如果它对a、c组件的数据毫无兴趣,则可以做到完全解耦
1、数据管理模式
随着数据管理的进一步发展和演变,有一种叫单向数据流的东西冒了出来。图3就是一个表示“单向数据流”理念的极简示意。单向数据流要求各组件间的数据走向永远是单向的,可预期的。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交Actions。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够更好地了解我们的应用。

Vuex可以说是单向数据流的最佳实践者。
Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想,就是前面所说的单向数据流。图4就是Vuex实现单向数据流的示意图。

相关文章:

  • 2021-12-31
  • 2022-12-23
  • 2021-06-06
  • 2021-10-01
  • 2021-12-28
  • 2021-08-28
  • 2021-07-17
  • 2021-07-01
猜你喜欢
  • 2021-10-22
  • 2021-11-25
  • 2022-02-13
  • 2021-04-02
  • 2021-07-24
  • 2021-11-26
  • 2021-06-26
相关资源
相似解决方案