vue2+typescript 的一些新写法

记录下这几个页面的写法

about.vue

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <br />
        <div>{{ aa }}</div>

        <button @click="save">修改aa</button>
        <User
            v-for="item in userList"
            :info="item"
            :key="item.name"
            @on-remove="remove"
            @change-age="changeAge"
            v-model="curItem"
        ></User>
        <div>{{ curItem }}</div>
        <br />
        <div>count:{{ count }}</div>
        <button @click="plusCount">增加count</button>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Model } from "vue-property-decorator";

/**
 * @Component
 * @Watch
 * @Prop
 * @Model 通过v-model使用
 * @Emit 自定义事件
 * */

/*
export default {
  name:"组件名",
  data(){
    return{
      num:11,
      name:"yangjie"
    }
  },
  computed:{
    aa:{
      get(){
        return this.num
      },
      set(val){

      }
    }
  }
}
*/
import User from "../components/user.vue";
import { AboutStore } from "../store/module/about";
interface IUser {
    name: string;
    age: number;
    sex?: string | number;
}
@Component({
    components: {
        User
    }
})
export default class About extends Vue {
    // VUEX  取值
    get count() {
        return AboutStore.count;
    }

    plusCount(): void {
        AboutStore.updateCount(1);
    }

    // data
    num: number = 11;
    name: string = "yangjie";

    userList: Array<IUser> = [
        { name: "yangjie", age: 20, sex: "1" },
        { name: "junchi", age: 11 },
        { name: "haojie", age: 67, sex: "0" }
    ];

    // curItem: IUser = { name: "yangjie", age: 20, sex: "1" };
    curItem: string = "1111";

    // 计算属性
    get aa() {
        return this.num;
    }
    set aa(val) {}

    // 方法 直接写
    save() {
        this.num++;
        this.userList[0].name = "asdasdasd";
    }
    remove(val: string) {
        console.log(val);
    }
    changeAge(val: string) {
        let index: number = this.userList.findIndex(item => {
            return item.name == val;
        });
        console.log(val, index);
        this.userList[index].age++;
    }

    // 监听属性
    @Watch("num")
    numChange(newVal: number, oldVal: number) {
        console.log(oldVal, newVal);
    }

    // @Watch("num", { deep: true, immediate: true })
    // numChange(newVal: number, oldVal: number) {
    //     console.log(oldVal, newVal);
    // }

    // 钩子函数 都一样
    created() {}
}
</script>

user.vue

<template>
    <div>
        <div>姓名：{{ info.name }}</div>
        <div>型别：{{ SEX[info.sex] }}</div>
        <div>年龄：{{ info.age }}</div>
        <!-- <input type="text" :value="fffname" @input="aaaa" /> -->
        <button @click="deleted">emit事件</button>
        <button @click="changeAge(info.name)">增加年龄</button>
        <button @click="chooseItem(info.name)">
            选择{{ fffname == info.name }}
        </button>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Model } from "vue-property-decorator";
interface IUser {
    name: string;
    age: number;
    sex?: string | number;
}
//枚举
enum Sex {
    "男" = 1,
    "女" = 0
}
@Component({
    name: "User"
})
export default class User extends Vue {
    SEX: any = Sex;

    @Model("emitValue", {
        type: String
    })
    fffname!: string;
    @Prop({
        type: Object,
        default: () => {
            return { name: "aaa", age: 1 };
        }
    })
    readonly info!: IUser;

    // @Prop(Number)
    // id!: number;

    // @Prop([Number, String])
    // name!: number | string;

    // @Prop({ type: Number, default: 1 })
    // sex!: number;

    // 方法
    @Emit("on-remove")
    deleted(): string {
        // return 不屑 会自动把参数返回
        return "asdasdadsa";
    }

    //     也会发出事件deleted  如果是 changeAge ==>change-age
    @Emit()
    changeAge(val: string): string {
        // return 不屑 会自动把参数返回
        return val;
    }

    @Emit("emitValue")
    chooseItem(val: string) {
        console.log(111111, val);
        return val;
        // this.$emit("input", val);
    }

    // @Emit("emitValue")
    // aaaa(e: any) {
    //     return e.target.value;
    // }
}
</script>

store => index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import {IAboutState} from './module/about'
// import {IAboutState111} from './module/about'

interface IRootState {
    about:IAboutState,
    // about11:IAboutState111,
}

export default new Vuex.Store<IRootState>({
});

module

import { Module,VuexModule,Mutation,Action,getModule } from "vuex-module-decorators";
import store from '../index'

// 接口
export interface IAboutState{
    count:number;
    list:Array<number>
}

@Module({
    name:"about",
    dynamic:true,   //动态模块
    store
})
export default class About extends VuexModule implements IAboutState{
    count:number =1;
    list:Array<number> = [1,2,3,4];



    get getList (){
        return this.list.splice(1,3)
    }

    @Mutation
    updateCount(num:number){
        this.count += num
    }

    @Mutation
    updateList(arr:Array<number>){
        this.list = arr
    }


    @Action
    async getListApi(){
        // 可以异步获取
        // let info = await aaa()
        return this.list
    }

}

// 就等于
/*
{
    state:{
        count:1,
        list:[1,2,3,4]
    }
}
 */

export const AboutStore = getModule(About)