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大法好！