Vuex①(简介、原理)

网友投稿 276 2022-09-05

Vuex①(简介、原理)

文章目录

​​什么是Vuex​​​​Vue版求和案例​​​​Vuex的工作原理​​

什么是Vuex

​​Vuex​​:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

这里的状态我们可以暂且理解为数据

为了更好地理解Vuex我们可以举一个例子:

假如现在A组件有一些数据,B、C、D组件都想要,如果使用全局事件总线我们可以这么做:

以上我们只考虑了读取,如果我们现在想修改数据,那么我们就要把修改的数据通过B、C、D组件传给A,如下图所示:

可以发现如果我们想要实现某一部分数据在所有(部分)的组件中实现共享是很麻烦的。

而Vuex这个插件可以让共享数据实现的非常轻松!

比如现在我们想把​​x=1​​这个数据共享:

我们可以调用特殊的API实现数据的读取修改。

从以上我们可以发现,Vuex的使用场景:

多个组件依赖于同一状态来自不同组件的行为需要变更同一状态

Vue版求和案例

我们直接写一个Conut组件再在App组件中去引入它,Count组件代码如下:

Vuex的工作原理

我们先来看Vuex的三个重要组成部分:

Actions代表动作行为Mutations代表修改、加工、维护state代表状态(数据)

我们说的要把数据交给Vuex进行管理,其实就是把数据交给Vues里的state对象进行管理。

接下来我们可以看到左边的Vue组件,上面带有dispatch的箭头表示我们可以在组件中调用一个名为dispatch的API(就拿上面的案例来说你点完+那个按钮之后,你要在组件里表达出来你要还干什么,而dispatch就充当了这个报信的作用)。

这个词在消息的订阅与发布中提到过,译为“分发,派遣”

dispatch是一个函数,我们在调用它的时候需要传入两个参数:

第一个参数:你要进行的动作类型,是一个字符串第二个参数:动作的具体内容

例如在上面的案例中,我们要把数字加上2,加就是动作类型,2就是动作的具体内容。

dispatch这个箭头的终点指向的是Actions,这个Actions本质也是一个对象。Actions对象一定会有一个key与dispatch方法中的动作类型对应。

例如:

如上图当你执行完dispatch之后,会立马执行jia对应的回调函数。这个函数调用的时候会收到dispatch的第二个参数2。然后在这个回调函数中我们要自己去调用commit()这个函数:

commit同样也有两个参数,我们通过这两个参数把行为进行提交,然后我们来到了Mutations,他也是一个Object对象。同样它里面也一定会有对应的key,以及回调函数:

这个回调函数会拿到两个东西:

整个state对象行为内容(也就是案例中的2)

随后我们在这个回调函数中写上我们的变化要求,state里面的数据就会更新:

这个mutate不是API不需要我们去调用

随后Vuex会帮我们重新解析整个组件,然后再去重新渲染 (也就对应着上图的render)

这个Devtools代表Vuex官方的的开发者调试工具,它直接与mutations对话,因为mutations才是真正意义上帮助我们修改state的人。

另外Vuex的这三个部分都要经过一个人的领导store:

我们之所以需要它是因为,我们前面调用的dispatch方法是它身上的,commit方法也是它身上的。

这也就意味着我们要让所有的组件实例对象看得到这个store

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:擅长体育营销的vivo,为何这次将目光投向了中国女排?
下一篇:Filter
相关文章

 发表评论

暂时没有评论,来抢沙发吧~