Vue-class

说明

此项目是vue-class-component v8.0.0 以上版本的装饰器扩展

支持的装饰器

@Prop
@State
@Action
@Mutation
@Getter
@Provide
@Inject
@Watch
@Component

@Prop

export default class App extends Vue {
    @Prop
    declare readonly title:string
}

等同于

export default defineComponent( {
  name: 'App',
  props:['title']
})

---

export default class App extends Vue {
    @Prop({
        default:'hello gowiny!'
    })
    declare readonly title:string
}

等同于

export default defineComponent( {
  name: 'App',
  props:{
      title:{
        default:'hello gowiny!'
    }
  }
})

---

@State

export default class App extends Vue {
    @State
    declare readonly appName:string
}

等同于

export default defineComponent( {
  name: 'App',
  computed:{
    appName(){
        this.$store.state.appName
    }
  }
})

---

export default class App extends Vue {
    @State("app.version")
    declare readonly appVersion:string
}

等同于

export default defineComponent( {
  name: 'App',
  computed:{
    appVersion(){
        this.$store.state.app.version
    }
  }
})

@Action

export default class App extends Vue {
    @Action
    saveScreenSize!:(screenSize:any)=>Promise<any>
}

等同于

export default defineComponent( {
  name: 'App',
  methods:{
    saveScreenSize(screenSize:any):Promise<any>{
        return this.$store.dispatch("saveScreenSize",screenSize)
    }
  }
})

---

export default class App extends Vue {
    @Action("app/saveScreenSize")
    saveScreenSize!:(screenSize:any)=>Promise<any>
}

等同于

export default defineComponent( {
  name: 'App',
  methods:{
    saveScreenSize(screenSize:any):Promise<any>{
        return this.$store.dispatch("app/saveScreenSize",screenSize)
    }
  }
})

@Inject

export default class App extends Vue {
    @Inject
    getScreenSize!:()=>any
}

等同于

export default defineComponent( {
  name: 'App',
  inject: ['getScreenSize']
})

---

export default class App extends Vue {
    @Inject
    getScreenSize(){
        return {width:800,height:600}
    }
}

等同于

export default defineComponent( {
  name: 'App',
  inject: {'getScreenSize':{
      default:function(){
          return {width:800,height:600}
      }
  }}
})

---

export default class App extends Vue {
    @Inject("screenWidth")
    width:number
}

等同于

export default defineComponent( {
  name: 'App',
  inject:{
    width:{
        from:'screenWidth'
    }
  }
})

---

export default class App extends Vue {
    @Inject({from:'screenWidth',default:800})
    width!:number
}

等同于

export default defineComponent( {
    name: 'App',
    inject: {
        width:{
            from:'screenWidth',
            default:800
        }
    }
})

其他装饰器的用法都类似，不再一一举例