1 Core Plug-in

  • vue-property-decorator
  • vuex-class

2 Combination of TS and VUE

    import {Vue, Component, Prop, Watch} from 'vue-property-decorator';

    @Component({name: 'Fleet'})
    exportdefault class App extends Vue { // data counter: number = 10; icons: Array<any> = [ ... ]  // props @Prop() captain! : string; @Prop() commissar! : string; // computed gettotalShips() {... } // watch @Watch('counter') counterList(cur: number, pre: number) { ... } // methods increse(option: string) { ... }}Copy the code

3 ts + vuex

3.1 How is store defined

import {ActionTree, MutationTree, GetterTree} from 'vuex';

class FleetState {
    counter: number = 0;
    frigates: Array<Ship> = [];
    destroyers: Array<Ship> = [];
    assaults: Array<Ship> = [];
}

const fleet = {
    namespaced: true,
    state: new FleetState(),
    getters: {
        ...
    } as GetterTree<FleetState, any>,
    mutations: {
        ...
    } as MutationTree<FleetState>,
    actions: {
        ...
    } as ActionTree<FleetState, any>
}
Copy the code

3.2 How to Use it in VUE Components

    import {State, Getter, Mutation, Action, namespace} from 'vuex-class';
    const fleetModule = namespace('Fleet');

    @Component({name: 'Fleet'})
    export default class App extends Vue {
    
        // state
        @fleetModule.State('frigates')
        frigates: Array<Ship>;

        // getter
        @fleetModule.Getter('ships')
        ships: Array<Ship>;

        // action
        @fleetModule.Action('createFrigate')
        createFrigate: any;
        
        @fleetModule.Action('searchFrigate')
        searchFrigate: any;
    }
Copy the code

4 ts and promise

async createFrigate({dispatch}, params) { const [err, res] = await service.createFrigate(params); . }Copy the code

Promise.then (function(res) {}) res is of type Array. Therefore, resolve(response) receives response of type Array, and the T in new Promise(function() {}) is Array.

    createFrigate(params: Object) {
        return new Promise<Array<any>>(function(resolve) {
            setTimeout(function() {
                const ship: Ship = new Frigate();
                frigates.push(ship);
                resolve([null, null]);
            }, 500);
        });
    }
Copy the code

5 Project source code

Complete source code

I’ll be sad if I don’t like it.