[1] VueX

70 阅读1分钟

一、是什么

VueX是Vue的状态管理工具,有以下5个部分组成:

  • state:存放公共数据的地方;
  • getter:获取根据业务场景处理返回的数据。可以认为是 store 的计算属性,就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
  • mutations:唯一修改state的方法,修改过程是同步的;
  • action:异步处理,通过分发操作触发mutation;
  • module:将store模块分割,减少代码臃肿;

二、VueX应用的核心就是 store(仓库)。

2.1 VueX的核心

store基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。有些同学可能会问,那我定义一个全局对象,再去上层封装了一些数据存取的接口不也可以么?

image.png

2.2 Vuex 和单纯的全局对象有以下两点不同:

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  • 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
  • 另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护