Vue开发库存管理前端页面时一些小经验记录

全局封装

场景是在项目中不少地方都须要用到相同的函数，例如

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: '<App/>'
})
复制代码

而后须要在本身封装的请求函数中添加对这两个变量的控制，本项目中是封装的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');
复制代码