在Vue项目中使用Typescript的实现(2)

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'] } }

mixin

对于mixin，我们使用class的继承很容易实现类似功能。

import Vue from 'vue' import { Component } from 'vue-property-decorator' @Component class DeployMixin extends Vue{ name: string; deploy(){ // do something } } @Component class Index extends DeployMixin{ constructor(){ super() } sure(){ this.deploy() } }

VS code jsx快捷键

设置 VS code中对emmet的支持

"emmet.includeLanguages": { "javascript": "html" }

或者是

"emmet.includeLanguages": { "javascript": "javascriptreact" }