编程实战教程14_Vue全家桶 - Vuex状态管理.pdf

Vue全家桶–Vuex状态管理

王红元coderwhy

目录1认识应用状态管理

content

2Vuex的基本使用

3核心概念State

4核心概念Getters

5核心概念Mutations

6核心概念Actions

7核心概念Modules

coderwhy什么是状态管理

◼在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需

要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就

称之为是状态管理。

◼在前面我们是如何管理自己的状态呢？

在Vue开发中，我们使用组件化的开发方式；

而在组件中我们定义data或者在setup中返回使用的数据，这些数

据我们称之为state；

在模块template中我们可以使用这些数据，模块最终会被渲染成

DOM，我们称之为View；

在模块中我们会产生一些行为事件，处理这些行为事件时，有可能

会修改state，这些行为事件我们称之为actions；

coderwhy复杂的状态管理

◼JavaScript开发的应用程序，已经变得越来越复杂了：

JavaScript需要管理的状态越来越多，越来越复杂；

这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等；

也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；

◼当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态；

来自不同视图的行为需要变更同一状态；

◼我们是否可以通过组件数据的传递来完成呢？

对于一些简单的状态，确实可以通过props的传递或者Provide的方式来共享状态；

但是对于复杂的状态管理来说，显然单纯通过传递和共享的方式是不足以解决问题的，比如兄弟组件如何共享数据呢？

coderwhyVuex的状态管理

◼管理不断变化的state本身是非常困难的：

状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；

当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；

◼因此，我们是否可以考虑将组件的内部状态抽离出来，以一个全局单例的方式来管理呢？

在这种模式下，我们的组件树构成了一个巨大的“试图View”；

不管在树的哪个位置，任何组件都能获取状态或者触发行为；

通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，我们的代码边会变得更加结构

化和易于维护、跟踪；

◼这就是Vuex背后的基本思想，它借鉴了Flux、Redux、Elm（纯函数语言，redux有借鉴它的思想）；

◼当然，目前Vue官方也在推荐使用Pinia进行状态管理，我们后续也会进行学习。

coderwhyVuex的状态管理

coderwhyVuex的安装

◼依然我们要使用vuex，首先第一步需要安装vuex：

我们这里使用的是vuex4.x；

npminstallvuex

coderwhy创建Store

◼每一个Vuex应用的核心就是store（仓库）：

store本质上是一个容器，它包含着你的应用中大部分的状态（state）；

◼Vuex和单纯的全局对象有什么区别呢？

◼