关于vuex,我们听到最多的是vuex是一个状态管理容器,可以解决组件之间通信的痛点。但vuex真的只是这样吗?
平时,我更喜欢将vuex比喻成一个前端程序的数据库。他可以储存各种数据,需要什么直接过去拿就行。我们都知道,单页面应用只要页面跳转了,data中的数据都会清空。但store中的数据不会清空,只有在页面刷新时,会清空store中的数据
一.那我们是不是可以这样设计?
当我们需要获取数据时,在action中发起请求,然后将数据直接放到store里面。每当我们进入这个页面,都先判断一下store中有没有这些数据,如果有就直接拿,没有的话就通过action发出请求
二.实际应用
场景说明:
这是一个移动端的产品,首页有轮播图组件。每次我们进入这个页面,都需要发起请求获取轮播图的一些数据。大家可以想像一下。通常我们我们使用这个应用的时候,点击美食 > 退回首页 > 点击酒店 >退回首页 ......
我们进入首页的时候非常多,如果每次进入这个页面,都从created钩子去获取数据,会发起很多次请求。其实这是根本没有必要的。利用之前的思想,我们就可以实现如下效果。
Demo地址:
https://github.com/pppercyWang/vue-typescript-mobile
关于分页数据的处理可以看这个PC端的管理平台模板
https://github.com/pppercyWang/vue-typescript-admin
三.那我所有的请求都要在action中去请求,然后存在store中吗?
其实是没有必要的。比如说一些列表的数据可以放在store中。但是一些短暂性的请求(比如删除,修改)就直接写在methods中就可以了。
如果有讲的不好的地方,欢迎指正。qq:845082868
四.总结
Vuex大法好!