本文共 1450 字，大约阅读时间需要 4 分钟。

说明

需要使用这三个：

• vue-class-component 可以把组件写成 class 的模式，自定义装饰器，路由钩子。
• vue-property-decorator 提供这些装饰器

@Prop@PropSync@Model@Watch@Provide@Inject@ProvideReactive@InjectReactive@Emit@Ref@Component (由 vue-class-component 提供)Mixins (由 vue-class-component 提供)

• vuex-class 提供 class 组件的 vuex 的支持

vue-class-component和vue-property-decorator区别

import Component from 'vue-class-component';import {    Component } from 'vue-property-decorator'

这里的 vue-property-decorator 完全继承于 vue-class-component，所以都有 Component

vuex-class例子

import Vue from 'vue'import Component from 'vue-class-component'import {     State,  Getter,  Action,  Mutation,  namespace} from 'vuex-class'const someModule = namespace('path/to/module')@Componentexport class MyComp extends Vue {     @State('foo') stateFoo  @State(state => state.bar) stateBar  @Getter('foo') getterFoo  @Action('foo') actionFoo  @Mutation('foo') mutationFoo  @someModule.Getter('foo') moduleGetterFoo  // If the argument is omitted, use the property name  // for each state/getter/action/mutation type  @State foo  @Getter bar  @Action baz  @Mutation qux  created () {       this.stateFoo // -> store.state.foo    this.stateBar // -> store.state.bar    this.getterFoo // -> store.getters.foo    this.actionFoo({    value: true }) // -> store.dispatch('foo', { value: true })    this.mutationFoo({    value: true }) // -> store.commit('foo', { value: true })    this.moduleGetterFoo // -> store.getters['path/to/module/foo']  }}