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中使用：