搭建多页博客总结（三）vuex状态管理

搭建多页博客总结（三）vuex状态管理

博客搭建起来有好一段时间了，vue的状态集vuex受到这次搭建学习的影响，感觉格外深刻。

那咱们就来谈一谈vuex吧！

怎么理解vuex好呢？我感觉就是一个操作“全局变量”的过程。

为什么用vuex

自从用了vue之后就感觉停不下来，它诱人的地方之一就是他的每个组件中的属性都是独立开来的，在开发中大大降低了耦合性。

虽然单个组件开发变得容易得多了，但是又出现了一些新的问题，比如说组件间的通信，当然父子组件间可以直接porps和emit事件传递。但是遇上一些多个组件复用的属性呢？同级间的属性呢？虽然说也能够通过props和emit事件来处理，但用下来会很繁琐，而且维护变得极其不易。而vuex通过外部来管理这些共用的状态，能够使得多个组件间很容易取得属性状态，操作属性状态，让一切变得那样舒适与简洁…

vuex用法

其实这就是官网的一张图就能说明

在组件内部通过dispatch给Action信号，在Action中进行异步操作，比如ajax…

对应commit操作是将原生数据在Mutation进行提交处理给state储存全局状态，这里面只能进行同步操作

在组件中拿到state全局状态可以通过computed计算属性中返回，拿多个状态的时候可以用es6的拓展运算符获取，会方便不少呢

例如

在博客中用到的vuex

这次博客中用到的vuex的东西也不少，其中的登录状态操作，文章页，文章列表以及加载动画触发的状态。

其中为了方便维护，分别把Action，mutation，store分开…

其中的大部分都大同小异，就找两个有代表性的来谈一谈：

查询对应标签的文章列表状态

在Action中异步调用网络请求，成功后将数据commit提交，并且返回一个Promise对象。

commit提交后将状态内容交给，stroe即可进行需求的页面进行渲染；

返回的Promise对象告知所需状态页面网络请求成功，关闭加载动画。

详细内容如下

动画开启关闭状态

这个比较简单一些,当初最开始的时候的想法并不想用状态集，直接在每一个需要加载的地方调用加载动画组件，然后父子组件通信即可。但后来一想，好多地方一用的话太麻烦了，能不能只用一个组件呢？后面一拍脑袋，就想到了这个方法：

在顶级路由中直接用这个组件，v-if确定是否渲染，然后在全局靠状态集管理。

加载前开启动画

等待返回Promise对象后，再次执行关闭动画

详细内容如下

总结

这次vuex是给我解决了组件上的频繁通信不便的问题，以及组件状态复用问题。总之，是极大的方便了开发，不过在这同时也遇到了一些许的小坑坑，比如，载入这篇文章后，再进入其他文章的时候，由于状态更新需要等待网络查询，会有短暂显示还是上一篇文章然后快速切换为选择的文章的情况，后面想了想，耍了个小聪明，在请求未完成之前，用一个白色的蒙版把文章给遮住，然后通过动画完成，去除掉这个蒙版，嘻嘻，搞定！顺便我又发现不更新状态集会一直保持原样，那我还能判断访客是否进入的还是同一篇文章，如果是的话，就直接不用查询了，用状态集保存的状态即可，简直美滋滋…同时还做的减少查询提高效能的目的（ps：虽然并不能提高多少）！

反正总的来说踩过坑越多收获越多，嘿嘿！