1. vuex简介
vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起,集中式来管理。需要声明的是,这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧,如果不懂的话,建议先学完vue的基础知识再看vuex。
那么vuex的目的就是为了解决vue中组件和组件间传值的问题。熟悉vue的应该知道,组件间的传值的方式是根据组件间的关系来定的。比如父组件向子组件传值的的话是通过props,而子组件向父组件传值的话,是通过on()自定义事件,然后在子组件中通过emit()函数来触发该自定义函数。那么如果组件间的关系层次很深的话,那就很麻烦了。另外,兄弟组件间的传值,则可以event bus来达到目的,但是更是让人头疼。所以为解决这个传值的问题,vuex的思路是将应用中的所有的状态,以及其更改的逻辑都集中在一个单独的对象中,并且这个对象可以在根组件中注册,这样,所有的下层子组件都能够获得这个对象中的状态。不论组件之间的关系是什么样的,状态都从vuex的这个对象中去获取,而不用再去关注组件之间是啥关系了。那么这些都是如何去实现的呢,这就是vuex去做的事情了,其内部都已经帮我们封装好,我们只需要按照规则去使用就好了。先别急,下面会慢慢一一道来。
2. vuex的组成结构示意图
通过这个图,我们很容易就对vuex的组成部分,以及vuex与组件(components)之间的联系一目了然。其实这张图,有点迷惑人,暂时看不懂也没关系,只要有一个直观的认识就行了。至于这张图的描述,就不用了哈,大家直接看就行了,图已经是最直观的语言了。