VueX介绍和工作原理-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、VueX的作用
VueX就是在Vue中专门集中地管理数据的一个Vue插件。
在VueX中的数据不属于任何一个组件所有的组价都可以访问和修改这个数据。
因此当我们的多个组件依赖同一个状态如用户信息时就可以使用VueX。
二、VueX的原理
VueX的工作原理可以用下面这张图来进行解释
1.State
所有管理的数据都存放在VueX的State对象中。
通过render函数就可以将State中的数据渲染到Vue Components中。
2. Actions
用户所有对数据的操作都是在Vue Components中进行的这时候就会有操作的"行为"和"数据"。
比如用户点击了一下按钮number+1这里的+操作就是行为number就是数据。
Vue Components通过pispatch方法将行为和数据传递给Actions对象。
Actions对象中存放着一系列的行为函数就可以根据Vue Components传递过来的行为找到与之对应的函数。
3. Mutations
Actions在对应的行为函数中再调用commit方法将行为和数据传递给Mutations对象。
Mutation对象中存着所有的行为和数据找到与之对应的行为函数将数据和State中的数据进行相应的操作。
处理完成的数据又通过mutate函数存入State中。
4. Store
Store在图像中并未体现出来下图中所有红色框住的部分都是Store的组成部分。
因此我们在调用方法的时候就是在调用Store中的方法如Store.dispatchStore.Mutations
5. 补充
在上面Actions的介绍中Actions显得很多余。
其实很多时候我们可以直接使用如下蓝色的这条线
那我们在什么情况下要使用Actions对象
当我们处理的数据需要通过后台API返回的数据进行处理的时候就要使用到Actions对象。