27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解

Vue3状态管理-Vuex的基本使用及state和getters的使用详解

什么是状态管理

在开发中,我们会的应用程序需要处理各种各样的数据,这些数据需要保存在我们应用程序中的某一个位置,对于这些数据的管理我们就称之为是 状态管理

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

  • 在Vue开发中,我们使用组件化的开发方式;
  • 而在组件中我们定义data或者在setup中返回使用的数据,这些数据我们称之为state;
  • 在模块template中我们可以使用这些数据,模块最终会被渲染成DOM,我们称之为View;
  • 在模块中我们会产生一些行为事件,处理这些行为事件时,有可能会修改state,这些行为事件我们称之为actions;

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第1张图片

复杂的状态管理

JavaScript开发的应用程序,已经变得越来越复杂了:

  • JavaScript需要管理的状态越来越多,越来越复杂;
  • 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等;
  • 也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;

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

  • 多个视图依赖于同一状态;
  • 来自不同视图的行为需要变更同一状态;

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

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

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

Vuex的状态管理

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

  • 状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;
  • 当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;

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

  • 在这种模式下,我们的组件树构成了一个巨大的 “视图View”;

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

  • 通过定义和隔离状态管理中的各个概念,并通过强制性的规则来维护视图和状态间的独立性,我们的代码边会变得更加结构化和易于维护、跟踪;

这就是Vuex背后的基本思想,它借鉴了Flux、Redux、Elm(纯函数语言,redux有借鉴它的思想)

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第2张图片

Vuex的基本使用

依然我们要使用vuex,首先第一步需要安装vuex:

我们这里使用的是vuex4.x,安装的时候需要添加 next 指定版本;npm install vuex@next

创建Store

每一个Vuex应用的核心就是store(仓库):store本质上是一个容器,它包含着你的应用中大部分的状态(state);

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

第一:Vuex的状态存储是响应式的

  • 当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会被更新;

第二:你不能直接改变store中的状态

  • 改变store中的状态的唯一途径就显示提交 (commit) mutation

  • 这样使得我们可以方便的跟踪每一个状态的变化,从而让我们能够通过一些工具帮助我们更好的管理应用的状态;

使用步骤:

  1. 创建Store对象;
  2. 在app中通过插件安装;

Vue devtool

vue其实提供了一个devtools,方便我们对组件或者vuex进行调试:

我们需要安装beta版本支持vue3,目前是6.0.0 beta15;

它有两种常见的安装方式:

  • 方式一:通过chrome的商店;
  • 方式二:手动下载代码,编译、安装;

方式一:通过Chrome商店安装:

由于某些原因我们可能不能正常登录Chrome商店,所以可以选择第二种;

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第3张图片

方式二:手动下载代码,编译、安装

  • https://github.com/vuejs/devtools/tree/v6.0.0-beta.15下载代码;
  • 执行 yarn install 安装相关的依赖;
  • 执行 yarn run build 打包

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第4张图片

单一状态树

Vuex 使用单一状态树

  • 用一个对象就包含了全部的应用层级的状态;
  • 采用的是SSOT,Single Source of Truth,也可以翻译成单一数据源
  • 这也意味着,每个应用将仅仅包含一个 store 实例;
  • 单状态树和模块化并不冲突,后面我们会讲到module的概念;

单一状态树的优势:

  • 如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难;

  • 所以Vuex也使用了单一状态树来管理应用层级的全部状态;

  • 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护;

组件获取状态–mapState的使用

在前面我们已经学习过如何在组件中获取状态了。

当然,如果觉得那种方式有点繁琐(表达式过长),我们可以使用计算属性:

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第5张图片

但是,如果我们有很多个状态都需要获取话,可以使用mapState的辅助函数:

  • mapState的方式一:对象类型;
  • mapState的方式二:数组类型;
  • 也可以使用展开运算符和来原有的computed混合在一起;
在setup中使用mapState

在setup中如果我们单个获取装是非常简单的:

  • 通过useStore拿到store后去获取某个状态即可;
  • 但是如果我们需要使用 mapState 的功能呢?

默认情况下,Vuex并没有提供非常方便的使用mapState的方式,这里我们进行了一个函数的封装:

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第6张图片

getters的基本使用

某些属性我们可能需要经过变化后来使用,这个时候可以使用getters:

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第7张图片

getters可以接收第二个参数:

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第8张图片

getters中的函数本身,可以返回一个函数,那么在使用的地方相当于可以调用这个函数:

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第9张图片

mapGetters的辅助函数

这里我们也可以使用mapGetters的辅助函数。

27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第10张图片

在setup中使用
27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解_第11张图片

你可能感兴趣的:(Vue.js,vue3,Vuex,state,getters,状态管理)