Vue3.x全家桶 35_Vuex状态管理应用概述 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，这节开始呢，我们再来学习一个新的知识点，VIVO X也叫VE叉，或者是vvo X都可以，这个名称无所谓了，我通常读做VI有X，那它是用来做状态管理的，那我都说了状态管理有什么用？咱们在学每一个知识点的时候，一定要知道这个知识点在我们开发的时候有什么用，什么地方能用到它，那我们才学它，才有意义，如果开发的时候都用不上，对吧？那你学它干嘛呀？那假如说我们不理解它，它是干嘛的，那我们也就不知道在开发时候怎么用，所以呢，我们在学一个新的知识点之后之前一定要了解这个知识点的概念。对吧，它是干嘛的，用作什么的，那现在呢，这个状态管理呢，有可能说你不太理解，当然了，像那个RA，咱们学react的时候，它也有videos，也是做呃状态管理的，但是我觉得没有VX好理解，也没有它好用，当然了，不同框架用不同的呃插件去做状态管理的。那咱们先来认识一下什么是V。我给大家画一个图。哇。

看一下，那我们在开发中经常会有很多个组件，你比如说。组件一组件二组件三对吧，那组件三有可能还有个子组件，有俩子组件对吧？那它有可能有负组件，就这样的一个组件的关系，你看这个组件组件组件，那当然它下边有可能也有其他的组件。有其他组件。用这个话。你看那所谓的状态，我们就把它想成是一个什么，前面咱们学过组件之间通信，那组件之间通信学过是父子组件通信，比如说从父组件把数据给子组件，那咱们用过什么属性的方式prop对不对？那子组件呢，也可以通过事件MIT的这个对吧，把数据传给组件对吧，层层往上传。是这样，那我们用过这个做状态管理，那我们做这个，当然他也不做状态管理，那个组件之间的通信，那组件之间的通信，我们通的是什么，是不是数据，也就是我们说的这个。

也对吧，嗯，了解吧，DK这个数据之间互相通信，两个组件之间是可以，那状态管理干嘛的呢？其实也是管理数据的，也是管理数据的，那有说组件之间通信就可以管理数据，为什么还要用状态管理呢？组件之间已经能通信了，但是组件之间通信有一点怎么的不太好的地方，第一点就是什么，如果把父组件的数据传给子组件，咱们能实现，但是这个传递的变量在子组件里边我改变了，负组件里边也用这个变量，它能是响应式的吗？对吧，这个是不能做到对不对，当然了，咱们用那个组合API，咱们也可以做到小公式的啊，那是咱们后边再学的知识点，对吧，就是想公式小公式。这样的副组件，从这个件组件全体副组件不好做，对吧？再有一点什么呢？如果我这个数据，这个数据我在这个组件里点，比如说这里边有一个a name，对吧，我想把它传到这个里边，假如在这里边去使用，使用这个name，你看那我们需要有多少层去传递呢？对吧？我需要把这个传到这来，对吧？再找到这个再往下传，再往下传，再往下传，那这两个中间再有一个组件，它俩是平行关系的才可以，对不对？当然我们一直可以传，传到APP，再往下传是可以做到的，对吧？你们觉得传的层数太多了嘛，那我们写业务的经历基本上都在传数据这块了，对吧，比较麻烦。

所以呢，组件之间通信咱们存在一个问题，就是一是不能想讲似的，另外数据太多，存起来比较麻烦，另外这个内部数据如果我在其他的组件里边再去应用，对吧，那你在其他组件里边还要传来传去，传了好多层，就会把程序的整个结构弄混乱。所以说v exx这个状态管理它们干嘛的，VX这个状态管理它是干嘛的呢？就相当于是一个全超全局的一个变量。超全局的一个电量，就类似于我们什么session啊，Cookie啊，跟那种感觉差不多对吧，那我们如果在这个里边传播数据，也就是在这里边有一个比如说名字一个变量，当然你可以生成多个变量，在这里边传一个数据，那么这个数据直接在任何子组件里边都可以使用，不用把这内幕通过四组件传过来，对吧？在这里边能用，在这里边能用，在这边能用，在这里边直直接都可以使用。

所有的组件可以共享的一个数据，这就是状态，说白了，状态就是你就可以把它想成是全局变量，就是一个大变量，全局变量就可以了。而且通过VES管理的这个变量，它自动加在了咱们V里边的详细管理里边，所以呢，这里边的变量你在这个模板里边把内容改掉了，那这个模板的内容也跟着会变化，所以啊，它是小模式的。所以你记住两个概念什么两个概念呢？一个是超全局，全局变量，超全局变量，第二个是响应式的，响应式的什么是响应式不用说了，对吧，在一个里边把这个值给改变了，其他的所有组件里边用这个数据的时候，数据都是实时跟着变的。

所以它有这两个特性，这就是V状态，所谓的状态就超级变量，那所谓的状态管理，管理是什么？就是管理这个变量，而不是说咱们平时直接给这个变量赋值，然后再取值，它通过很多个方法可以管理这个。清楚吧，比如说set方法，Get方法对吧，管理还可以用一些工具管理，所以呢，所谓的状态管理就是一是有状态，另外这状态我们可以它自身提供了很多功能来管理这个状态，这就叫状态管理。那什么时候应用到这个VS状态管理呢？但是项目要用不到，咱们根本就不会讲，对吧，那一些简单的，比如说你就是父子组件，两个组件之间的通信。不涉及到其他很多层通信，就两个组件之间通信，或者这个组件数据通到这一层，对吧，不用把所有的状态，你所有的变量你全升级到v exx里边，不用这么做，两个组件或者是三个有父子关系的，这样组件之间通信直接用父子组件之间通信就搞定了。

那涉及到一些全局的东西，记得不要把所有东西放在里边，比如说什么是全局东西呢？比如说我们登录的那个token，也就是你不管在任何一个页面登录对吧？服务器都会给你弹返回一个token，那证明是你登录了，那你在任何组件操作的时候，是不是都得带着这个token啊，因为只有登录之后才可以操作呀，所以任何组件都需要带这个token字符串，那么你就把token这个信息ton token对吧？放到VOEX里边，这是咱们做项目的时候会经常用到的。你做登录处理的时候，放在这里面，比如说各个页面，咱如说抛给你现在没用不知道，那么各个页面我们用的时候，假如说都需要显示用户名字对吧，都需要显示用户头像，有一个登录的状态，对吧？那用户名字用户头像的信息是不是也放到vivox点对吧？这样的话，我们在所有的组件里边是不是都能显示登录用户的这个用户状态。所以呢，VIVO放一些登录的信息和用户登录的状态。是不是和cookie或者session感觉有点像啊，但是这是cookie session session呢，是服务器端用的共享的当前用户共享状态的，对不对？Cookie呢，是客户端浏览器中的，对吧？而我们VS呢，是什么？是组件制定共享状态的对吧？做状态管理的是一个这样特点，再有比如说呃，商品的收藏或者文章的收藏，那有可能你首页页面有一个收藏按钮对吧？那文列表页面收藏按钮对吧？文章内容页面有收藏按钮，那么都是同一收藏，已经收藏过了，别的地方就不让他收藏了，对吧？当然你可以用服务器去管理来回请求，服务器也可以，但是呢，多个页面之间或者多个组件之间的，那可以共享一个数据，你点击一个收藏在二级页面，三级页面就不用点击收藏了，去收藏的信息，再比如说购物车，那我们购买的商品呢，在所有的商城里边去逛的时候，不管是哪个页面，你添加到购物车了，是不是任何页面都可以去请求购物车，对吧？那所有放购物车里边商品也可以用VX，类似于这样所有组件共用的用它单个组件制定，共用的就不用了。另外还有一种情况就是这种传递的层次太多的。

时候，传递的层太多的时候，比如说假如说不是所有组件共有就是。

我们这个组件里边和这个组件共用的时候，对吧。不是这个组件用不到，那也可以用VX，为什么？因为这个组件用的时候你得传对吧，在这块再传回来，是不是传的层太多呀，那这个时候呢，也可以用VX。所以它就是用一个状态管理的。听懂吧，嗯，相关的就是不相关的两个组件传递，或者通用的组件传递是全局变量的这样，所以这里边给你起了VVS专门为will应用程序开发的状态管理模式，对吧？就是一个加强版的date，在单页中会有一个data函数管理当前应用的，咱们每个呃，组件里边是不是都有一个date里边返回一个数据，是不是在当前的模板里边就都可以用，对吧？处理大量需要组件之间传递数据，直接可以定义全局的这个属性POS就行了，对吧，全局的date加强版的。如果页面比较简单，切记千万不要用这个，咱们说了就是两两个模板，父子子之间传递对不对。那样的话，你就会把VI有变得很复杂，VI有里边在一个项目里放的数据不多，就是公用的，那公用的数据也一共才能多，就是用户之间的信息，对不对，那很多数据呢，还需要复制组件，组件之间的传递，就是组件之间通信对不对？

那这就比如说了，它是详式的，什么时候用，这个大型项目中我是用的很多，对不对，多个子卷共应的数据，然后呢，还有用户的登录状态对吧，Token啊，名称啊，头像啊，地理位置等信息，还有什么比如商品啊，收藏啊，购物车啊，对吧，购物车的物品啊这些东西vuex，那Vue exx它应不属于VE的，只是属于VE生态中的什么插件，你看和我们。刚刚学过的什么路由这生态嘛，生态里边你看VE路由脚手架这个V，这些都属于它生态里边的全家桶里边的，你看V，所以呢，它的官方手是在这里边。相当于vuee的插件，清楚吧，也是官方开发的。那这里边它翻译的，嗯，现在因为新版的那个中文，他官方手势还没给我们翻译啊，所以我们先这么翻译一下，你可以找那个中文的手持，这是他的状态管理，那具体怎么用，那咱们下节再用，这节课你只要知道一点什么是VOEX对吧，它是干嘛的就行了，这样的话我们才知道学习的目标，知道怎么学，它也知道我们在开发的时候怎么用就行了，好，谢谢大家，这节课我们就讲到这里。