一、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.dispatch，Store.Mutations
5. 补充
在上面Actions的介绍中，Actions显得很多余。
其实很多时候我们可以直接使用如下蓝色的这条线：
那我们在什么情况下要使用Actions对象？文章来源：https://www.toymoban.com/news/detail-740100.html
当我们处理的数据需要通过后台API返回的数据进行处理的时候就要使用到Actions对象。 文章来源地址https://www.toymoban.com/news/detail-740100.html
到了这里，关于VueX介绍和工作原理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
