搭建多页博客总结（三）vuex状态管理
博客搭建起来有好一段时间了，vue的状态集vuex受到这次搭建学习的影响，感觉格外深刻。
那咱们就来谈一谈vuex吧！
怎么理解vuex好呢？我感觉就是一个操作“全局变量”的过程。
为什么用vuex
自从用了vue之后就感觉停不下来，它诱人的地方之一就是他的每个组件中的属性都是独立开来的，在开发中大大降低了耦合性。
虽然单个组件开发变得容易得多了，但是又出现了一些新的问题，比如说组件间的通信，当然父子组件间可以直接porps和emit事件传递。但是遇上一些多个组件复用的属性呢？同级间的属性呢？虽然说也能够通过props和emit事件来处理，但用下来会很繁琐，而且维护变得极其不易。而vuex通过外部来管理这些共用的状态，能够使得多个组件间很容易取得属性状态，操作属性状态，让一切变得那样舒适与简洁…
vuex用法
其实这就是官网的一张图就能说明
在组件内部通过dispatch给Action信号，在Action中进行异步操作，比如ajax…
对应commit操作是将原生数据在Mutation进行提交处理给state储存全局状态，这里面只能进行同步操作
在组件中拿到state全局状态可以通过computed计算属性中返回，拿多个状态的时候可以用es6的拓展运算符获取，会方便不少呢
例如
import { mapState } from 'vuex'
export default {
computed:{
...mapState({
articleInfo => state.articleInfo,
onLoading => state.onLoading
})
}
}
在博客中用到的vuex
这次博客中用到的vuex的东西也不少，其中的登录状态操作，文章页，文章列表以及加载动画触发的状态。
其中为了方便维护，分别把Action，mutation，store分开…
其中的大部分都大同小异，就找两个有代表性的来谈一谈：
查询对应标签的文章列表状态
在Action中异步调用网络请求，成功后将数据commit提交，并且返回一个Promise对象。
commit提交后将状态内容交给，stroe即可进行需求的页面进行渲染；
返回的Promise对象告知所需状态页面网络请求成功，关闭加载动画。
详细内容如下
//action.js
import API from '../util/api'
...
export const getTagList = ({commit}, payload) => {
return API.getTagList(payload)
.then(res => {
commit(types.GET_LIST, res);
return new Promise(resolve => resolve(res));
})
};
//mutations.js
...
import * as types from './type'
export default {
[types.GET_LIST] (state, data) {
state.indexPageList = data;
}
}
动画开启关闭状态
这个比较简单一些,当初最开始的时候的想法并不想用状态集，直接在每一个需要加载的地方调用加载动画组件，然后父子组件通信即可。但后来一想，好多地方一用的话太麻烦了，能不能只用一个组件呢？后面一拍脑袋，就想到了这个方法：
在顶级路由中直接用这个组件，v-if确定是否渲染，然后在全局靠状态集管理。
加载前this.$store.commit('showLoading');开启动画
等待返回Promise对象后，再次执行this.$store.commit('showLoading');关闭动画
详细内容如下
//mutations.js(这里无需用到Action)
export default {
['showLoading'](state){
state.onLoading = !state.onLoading;
}
}
总结
这次vuex是给我解决了组件上的频繁通信不便的问题，以及组件状态复用问题。总之，是极大的方便了开发，不过在这同时也遇到了一些许的小坑坑，比如，载入这篇文章后，再进入其他文章的时候，由于状态更新需要等待网络查询，会有短暂显示还是上一篇文章然后快速切换为选择的文章的情况，后面想了想，耍了个小聪明，在请求未完成之前，用一个白色的蒙版把文章给遮住，然后通过动画完成，去除掉这个蒙版，嘻嘻，搞定！顺便我又发现不更新状态集会一直保持原样，那我还能判断访客是否进入的还是同一篇文章，如果是的话，就直接不用查询了，用状态集保存的状态即可，简直美滋滋…同时还做的减少查询提高效能的目的（ps：虽然并不能提高多少）！
反正总的来说踩过坑越多收获越多，嘿嘿！