Vuex在Vue工程的正确使用

关于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大法好!

发布了51 篇原创文章 · 获赞 18 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_42565137/article/details/95168405
今日推荐