Vuex详解
解释 Vuex是一个专门为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件,并以相应的规则保证状态以一种可预测的方式发生变化,配套的公共数据管理工具,它可以把一些共享的数据放到vuex中方便整个程序中的任何组件直接获取或修改我们的公共数据。
注意点 只需要贡献的才放到vuex上面,不需要贡献的数据依然放到组件data上
状态管理到底是什么?
-
状态管理模式,集中存储管理,这些名词听起来非常高大上,让人捉摸不透
-
其实你可以简单地将其看成把许多个组件共享的变量全部存储在一个对象里面,然后将这个对象放在顶层的Vue实例中,让其他组件也可以使用。
-
多个组件是不是就可以共享这个对象中所有的变量属性了呢!!
Vuex解决的问题
- 如果想要在子组件中使用父组件中的数据,那么必须通过父组件传递
- 如果想要在子组件中使用祖先组件中的数据,那么就要一层一层的传递
- 兄弟组件之间不能直接传递数据,如果兄弟组件之间想要传递数据,那么必须借助父组件,虽然通过借助父组件能够实现兄弟组件之间的数据传递,但是这种方法极为复杂,非常的不推荐。
设想 如果这就是vuex的,我们能不能自己封装一个const对象来进行管理呢? 当然可以,只是我们要先想想vueJS带给我们最大的便利是什么?那当然是响应式啦,如果你自己封装实现一个对象能不能保证它里面所有的属性都做到响应式呢?当然也可以,只是自己封装会很麻烦,不用怀疑,vuex就是为了提供这样一个多个组件间共享状态的插件,用vuex就可以满足以上需求。
什么状态时需要我们在多个组件间共享呢? 一、 大型项目,遇到多个状态,在多个界面间共享。 二、 用户的登陆状态,用户名称,头像,地理位置等等。 三、 商品的收场,购物车中的物品等等 这些状态信息都可以放在统一的地方,对它进行保存何管理,而且还是响应式的。
Vuex单界面到多界面状态管理切换
在单个组件中进行状态管理是一件非常简单的事情。
|