ts:vue2项目中使用typescript
需要使用这三个:vue-class-componentvue-property-decoratorvuex-classimport Component from 'vue-class-component';import { Component } from 'vue-property-decorator'这里的 vue-property-decorator 完全继承于 vue-class-comp
·
说明
需要使用这三个:
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')
@Component
export 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']
}
}
更多推荐
已为社区贡献18条内容
所有评论(0)