TypeScript&&Vue使用总结

1.计算属性

 // 计算属性 --是否有学校被选中
  get hasSelected() {
    return this.selectedSchoolIds.length > 0;
  }

2.监视

  @Watch("visibleModal")
  async watchVisibleModal(newVal: boolean, oldVal: boolean) {
    if (newVal) {
      const res: any = await HttpRuquest.getBookPackageCardList();
      // code here
      if (res && res.code === 200) {
        this.packageCardList = res.data.data;
      }

3.Prop

 // 同步状态数组
  @Prop({ default: [] }) private asyncStatuses!: {
    [key: string]: string | number;
  }[];

4.Emit

  @Emit("change")
  private handleSelectChange(type: string, value: number) {
    if (!value) {
      Vue.delete(this.searchParams, type);
    } else {
      this.searchParams[type] = value;
    }
    return this.searchParams;
  }

5.Vuex
之前在使用 Vuex 的时候，主要是依赖 state、getters、mutations 以及 actions，并且可以将它们模块化
看了其他大佬的博客之后 自己在项目中实践了一下

目录结构

首先，在store下新建music文件夹存放music相关的状态，包括index.ts、getters.ts、types.ts、mutations.ts、actions.ts
index.ts下向外暴露

import { Module } from 'vuex'
import { MusicState } from './types'
import { RootState } from '../types'
import { getters } from './getters'
import { actions } from './actions'
import { mutations } from './mutations'

const state: MusicState = {
    current_index: 1,
    current_musicInfo: {},
    musicList: []
}
const namespaced = true
export const music: Module = {
    namespaced,
    state,
    getters,
    actions,
    mutations
}
export default state

types.ts下声明接口

export interface MusicState {
    current_index: number
    current_musicInfo: MusicInfo
    musicList: Array
}

getters.ts下暴露获取转台变量的函数

import { GetterTree } from 'vuex'
import { MusicState } from './types'
import { RootState } from '../types'

export const getters: GetterTree = {
    currentMusicInfo(state): MusicInfo {
        return state.current_musicInfo
    }
}

mutations.ts

import { MutationTree } from 'vuex'
import { MusicState } from './types'

export const mutations: MutationTree = {
    changeCurMusicInfo(state, index: number) {
        const len = state.musicList.length;
        const idx = index < 0 ? len - 1 : index > len - 1 ? 0 : index;
        state.current_musicInfo = state.musicList[idx];
        state.current_index = idx;
    }
}

actions.ts
import { MusicState } from './types'
import { ActionTree } from 'vuex'
import { RootState } from '../types'

export const actions: ActionTree = {
changeMusicData({ commit }, index): void {
commit('changeCurMusicInfo', index)
}
}

然后在store下的types.ts下声明

import { MusicState } from './music/types'

export interface RootState {
music: MusicState
}

在store下index.ts下

import Vue from 'vue'
import Vuex, { StoreOptions } from 'vuex'
import { RootState } from './types'
import { music } from "./music/index"

Vue.use(Vuex)

const store: StoreOptions = {
modules: {
music
}
}

export default new Vuex.Store(store)

###如何使用
在main.vue下使用vuex
先通过namespace声明music的状态

import { namespace } from "vuex-class";

const musicModule = namespace("music");

然后引入

// 引入vuex
@musicModule.Action("changeMusicData") public changeMusicData!: Function;
@musicModule.Mutation("changeCurMusicInfo") public changeCurMusicInfo!: Function;
@musicModule.Getter("currentIndex") public currentIndex!: number;
@musicModule.Getter("currentMusicInfo") public currentMusicInfo!: MusicInfo;
@musicModule.State("current_index") public current_index!: number;
@musicModule.State("current_musicInfo") public current_musicInfo!: MusicInfo;

然后就可以使用了