一、Vuex是做什么的?
Vuex
是一个专为 Vue.js 应用程序开发的状态管理模式
。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
二、状态管理到底是什么?
实际中多个组件会用到同一个状态,组件之间相互获取并不方便,需要层层传递,也不便于管理。
状态管理模式、集中式存储管理
可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。
那么,多个组件就可以共享这个对象中的所有变量属性了。
vuex既能共享又做到了响应式
。
三、管理什么状态呢?
但是,有什么状态时需要我们在多个组件间共享
的呢?
如果你做过大型开放,你一定遇到过多个状态,在多个界面间的共享问题。
- 比如用户的登录状态、token、用户名称、头像、地理位置信息等等。
- 比如商品的收藏、购物车中的物品等等。
这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的。
3.1 单页面状态管理
State
:不用多说,就是我们的状态。(你姑且可以当做就是data中的属性)
View
:视图层,可以针对State的变化,显示不同的信息。(这个好理解吧?)
Actions
:这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。
3.2 多界面状态管理
多个试图都依赖同一个状态(一个状态改了,多个界面需要进行更新)
不同界面的Actions都想修改同一个状态(Home.vue需要修改,Profile.vue也需要修改这个状态)。
我们现在要做的就是将共享的状态抽取出来,交给我们的大管家vuex
,统一进行管理。
之后,每个视图按照规定好的写法,进行访问和修改等操作。
这就是Vuex背后的基本思想。
Comments | NOTHING
Warning: Undefined variable $return_smiles in /www/wwwroot/blog.moonlet.cn/wp-content/themes/Sakura/functions.php on line 1078
Warning: Undefined variable $robot_comments in /www/wwwroot/blog.moonlet.cn/wp-content/themes/Sakura/comments.php on line 97