在vue中使用装饰器

 在使用js写vue项目时，我们也可以使用装饰器来实现aop，如删除确认，可以把它提取出来。

import { MessageBox } from 'element-ui';
import Vue from 'vue'
function confirmation(target, name, descriptor) {

  let oldFunction = descriptor.value;
  descriptor.value = function (...args) {
    MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')
      .then(oldFunction.bind(this, ...args))
      .catch(() => { });
  };

  return descriptor;
}
confirmation.install = function (Vue, options) {
  Vue.confirmation = confirmation
  window.confirmation = confirmation
  Object.defineProperties(Vue.prototype, {
    confirmation: {
      get() {
        return confirmation
      }
    }
  })
}

Vue.use(confirmation)
export default confirmation

main.js引入后 ，我们就获得了一个全局的装饰器

想要使用还需要安装vue-property-decorator，并修改babel.config.js配置

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    // vue-property-decorator 配置
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    // end vue-property-decorator 配置
  ]
}

使用时放在methods上即可。

@confirmation
deleteSystem(key, index) {
   ...
}

但在使用vetur时，会出现语法错误的提示，vetur目前不支持这种写法。