vue-class-component+ts+vuex-clas

目前 2.x 跟 TS 的整合，通常需要基于 vue-class-component 来用基于 class 的组件书写方式
vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：
官方文档：https://class-component.vuejs.org/

1.methods，钩子都可以直接写作class的方法
2.computed属性可以直接通过get来获得
3.初始化data可以声明为class的属性
4.其他的都可以放到Component装饰器里

举个栗子：

// 需要用到哪些方法需要引入
import { Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";
// 路由拦截(registerHooks)
Component.registerHooks([ "beforeRouteEnter" 'beforeRouteLeave', 'beforeRouteUpdate' ]);
@Component({
    // mixins两种用法下面专门讲
    mixins: [],
    // props传值(方法一)
    props: {
        firstName: String,
        lastName: String
    },
    // 注册组件
    components: {
        'component-a': ComponentA
    }
})
export default class about extends Vue {
  // props传值(方法二)
  @Prop() propA:string
  @Prop() propB:number
  @Prop({ default: "123" }) private propB3: string;
  private name: string = "liu";
  private num: number = 1;

  // 直接写方法，不需要放在methods
  clickFunc() {
    console.log("点击", this.name, this.num);
  }

  // 监听
  @Watch("num", { immediate: true })
  watchNum(newVal: number) {
    console.log(newVal);
  }

  //computed 属性
  get comput1() {
    return "computed " + this.num;
  }

  created(){
    console.log('created')
  }

  // 路由拦截
  beforeRouteLeave(to, from, next) {
       console.log(to, from)
       next();
  },
}

以类样式的方式使用mixins

声明mixin的示例：

// mixin1.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
  mixinValue = 'Hello'
}

使用mixin的示例1：

import Component, { mixins } from 'vue-class-component'
import MyMixin1 from './mixin1.js'
import MyMixin2 from './mixin2.js'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin1, MyMixin2) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}

使用mixin的示例2：

import MyMixin1 from './mixin1.js'
import MyMixin2 from './mixin2.js'
@Component({
  components: {},
  mixins: [MyMixin1, MyMixin2 ]
})
export class MyComp extends Vue {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}

vuex原始官方用法

参考官网地址

import Vue from 'vue'
import Component from 'vue-class-component'
import { mapGetters, mapActions } from 'vuex'

// Interface of post
import { Post } from './post'

@Component({
  computed: mapGetters([
    'posts'
  ]),

  methods: mapActions([
    'fetchPosts'
  ])
})
export default class Posts extends Vue {
  // Declare mapped getters and actions on type level.
  // You may need to add `!` after the property name
  // to avoid compilation error (definite assignment assertion).

  // Type the mapped posts getter.
  posts!: Post[]

  // Type the mapped fetchPosts action.
  fetchPosts!: () => Promise<void>

  mounted() {
    // Use the mapped getter and action.
    this.fetchPosts().then(() => {
      console.log(this.posts)
    })
  }
}

vuex-class：

安装：npm i vuex-class
原用法：如名为user的module模块

    this.$store.state.user.token
    this.$store.getters['user/getToken']
    this.$store.commit('user/setToken','commit')
    this.$store.dispatch('user/updateToken','dispatch')

vuex-class用法

import { State, Mutation, Action } from "vuex-class";   
@State("token") stateToken;
@Mutation("setToken") MutationToken;
@Action("updateToken") ActionToken;

this.stateToken
this.MutationToken("MutationToken")
this.ActionToken('ActionToken')

vuex-class module时用法， 列如user和person的module

import { namespace } from 'vuex-class';
const user = namespace('user');
const person = namespace('person');

export default class vuexModules extends Vue {
  @person.State(state => state.name) stateName: string;
  @user.State((state) => state.token) stateToken;
  @user.Getter('getToken') GetterToken;
  @user.Mutation("changeToken") MutationToken;
  @user.Action("updateToken") ActionToken;
  created() {
    console.log(this.stateName)
    console.log(this.stateToken)
    this.GetterToken
    this.MutationToken('MutationToken')
    this.ActionToken('ActionToken')
  }
}

参考资料：传送