// 需要用到哪些方法需要引入
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();
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')
复制代码
  
分类：
 前端
 
标签：
 
Vue.js