Parsing error: Stage 2 decorators disallow object literal property decorators 错误

我准备在vue项目当中加入decorator,实现一个保存route的query的功能,但是却报了Parsing error: Stage 2 decorators disallow object literal property decorators这个错误,经过各种调试终于把这个问题解决了,欢迎大家使用decorator,这玩意儿真好用

.eslintrc

在此文件中的选项parserOptions加入

    ecmaFeatures:{
      // 支持装饰器
      legacyDecorators: true
    }

支持了之后就不会报 Parsing error: Stage 2 decorators disallow object literal property decorators 错误

然后就可以愉快的在项目中使用decorator了，不需要额外的安装 @babel/plugin-proposal-decorators

哪些场景可以用装饰器

二次弹窗确认

// xx.vue
<script>
import {confirm} from '@/decorator'
export default {
  methods: {
    @confirm('确定要删除吗？', '提示')
    deleteItem(id) {
        deleteItem(id).then(res => {
        this.getTableList()
      })
    }
  }
}
</script>
// decorator/index.js
import { $confirm } from 'element-ui'
export function confirm(message, title, cancelFun) {
  return (target, name, descriptor) => {
    const fn = descriptor.value
    descriptor.value = async function(...rest) {
        try {
        await $confirm({
            message,
          title
        })
        fn.apply(this, reset)
      } catch(err) {
        cancelFun && cancelFun(err)
      }
    }
  }
}

防抖（等待有缘者补充）

节流（等待有缘者补充）

alert提示信息（等待有缘者补充）