全局封装
场景是在项目中很多地方都需要用到相同的函数，例如
this.$message({
type: 'success',
message: '提示语'
})
复制代码如果出现次数过多，会造成书写麻烦和代码复杂的情况。
解决思路：首先对函数进行抽象封装，封装后利用vue的mixin将其注入到各个vue中。
因为这里的函数是大部分组件中都可能用到的，固利用vue的全局混合。
-
新建一个global文件：
const globalMethods = { methods: { tipSuccess(msg) { this.$message({ type: 'success', message: msg }) }, tipError(msg) { this.$message({ type: 'error', message: msg }) }, }, } export { globalMethods } 复制代码 -
在新建Vue的原型中利用mixin混入（main.js中，创建vue实例前）：
Vue.mixin(globalMethods) 复制代码 -
任意vue中使用：
this.tipSuccess('成功提示') 复制代码
利用Vuex实现全局请求加载动画
场景是希望在所有请求的时候添加上加载动画。
首先遇到的问题是，加载动画应该挂载在哪里？某个组件中？这里需要根据具体的场景看，如果你的是多组件多页面，那么每一个全新的页面都需要添加一个加载动画，如果是一个单页面应用，可以建议添加在最外层的父组件上。例如本项目中的页面结构：
上方导航栏是在main.vue文件中
下方是整体一个retouer-view,因此我们如果需要在所有页面中添加加载动画，可以直接写在main.vue中
// 利用 elementUi的 v-loading
<template>
<div class="main" v-loading="this.$store.state.isRequesting">
<h3>
<i class="el-icon-menu"> i> 舜新建材公司库存管理系统h3>
<keep-alive>
<router-view>router-view>
keep-alive>
div>
div>
template>
复制代码上方代码中用到的this.$store.state.isRequesting就是我们实现全局请求添加加载动画的核心方法：利用vuex。
首先在新建store文件夹，index.js文件：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
isRequesting: false,
isError: false
}
const mutations = {
saveIsRequesting(state, isRequesting) {
state.isRequesting = isRequesting;
},
saveIsError(state, isError) {
state.isError = isError;
},
}
const actions = {
setIsRequesting({
commit
}, isRequesting) {
commit('saveIsRequesting', isRequesting);
},
setIsError({
commit
}, isError) {
commit('saveIsError', isError);
},
}
export default new Vuex.Store({
state,
actions,
mutations
})
复制代码上方代码的作用是新建了一个vuex的store，并且添加了两个变量isRequestin和isError，分别用来标记是否需要提示正在请求（加载动画），和是否请求出错（提示服务器错误），请求成功的提示场景比较多，所以需要在代码中自己实现。
记得在新建Vue实例的时候注入store:
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '然后需要在自己封装的请求函数中添加对这两个变量的控制，本项目中是封装的fetch.js:
// 关键代码
import store from '../store/index'
try {
// 在请求开始和结束时改变状态
store.dispatch('setIsRequesting', true)
const response = await fetch(url, requestConfig);
const responseData = await response.json();
store.dispatch('setIsRequesting', false)
return responseData;
} catch (err) {
// 错误时改变状态
store.dispatch('setIsRequesting', false)
store.dispatch('setIsError', true)
throw new Error(err)
}
复制代码然后就可以在main中实现自动提示了。
自动加载动画可以依赖ElementUI用v-loading实现：
v-loading="this.$store.state.isRequesting"
复制代码服务器错误提示需要自己手动实现，这里利用了vue的computed和watch两个钩子函数：
computed: {
isError() {
return this.$store.state.isError;
}
},
watch: {
isError(newVal) {
if (newVal) {
this.tipError('服务器出错啦T.T');
// 显示完后重置为false
this.$store.dispatch('setIsError', false);
}
}
}
复制代码至此，我们的请求提示封装就完成了，最终实现的效果是在任何请求发出时都会自动出现加载动画，并且在请求出错时提示服务器错误，不需要在每一个请求的时候都try..catch了。
兄弟组件通信
场景是两个不相关的组件需要通信，因为不是父子组件关系固不能利用this.$emit来传递。
固利用了vue提供的事件bus。
新建一个bus.js文件
import Vue from 'vue';
export default new Vue();
复制代码在需要监听事件的组件中：
import Bus from '../util/bus';
Bus.$on('eventName', this.handle);
复制代码触发事件的组件中：
import Bus from '../util/bus';
Bus.$emit('refreshGoodList');
复制代码