vue-ts-demo1

重新创建了项目

vue-property-decorator 掘金

组件内使用 自定义事件

父组件

<ButtonDemo @add="add" @reduce="reduce" text="默认按钮"></ButtonDemo>
  count = 0
  add() {
    this.count++
    // console.log(this)
  }
  reduce() {
    this.count--
  }

子组件

• @Emit 装饰器 可以接收父组件传递的方法，而且这个方法内可以写一些语句，这个方法会和父组件传递过来的 事件合并。
• 以前写的时候只能在 handle 方法里面操作自己的事，上面的标签中不能写 add() ,但是现在用 @Emit 可以了。很高级。
• @Emit

    <button @click="$emit('reduce')">-</button>
    <button @click="handle">-</button>
    <button @click="reduce">-</button>
    <button @click="$emit('add')">+</button>
    <button @click="add">+</button>s

  // 自定义事件(原始的方法)
  handle() {
    this.$emit('reduce')
  }

  @Emit()
  add() {
    console.log('子组件内需要做的事情')
  }
  reduce() {
    console.log('子组件内需要做的事情')
  }

组件内使用 生命周期 计算属性 computed

• @Component 装饰器是装饰 ButtonDemo class 类的
• 但是注意一点，必须是 @Component 装饰器装饰了，类内的装饰器才能被使用。
• @Component 装饰器 是一个方法
• 作用 1. 可以导入子组件
• 作用 2. 声明生命周期
• 作用 3. 设置计算属性

@Component({
  // 注册子组件
  components: {
    ButtonDemo
  },
  created() {
    // console.log('vuex-class 拿的数据:',this.StateStr)
    console.log('vuex-class 拿的数据:', this.str)
  },
  // 计算属性
  computed: {
    Count() {
      return this.count + this.count
    }
  }
})

组件内使用 @Watch

• 测试 @Watch
• @Watch 侦听器的装饰器

  @Watch('$route.query.tab', { immediate: true })
  handleTab(newTab: string, oldTab: string) {
    console.log('ButtonDemo', newTab, oldTab)
  }

在组件内获取 $route

还要看视频听老师是怎么解释的

1. 直接在事件内访问 $route 编辑器会报错
2. 直接在 class 内定义一个公共属性 $route
3. $route 并不存在在我组件上

text() {
  console.log(this.$route)
}

在组件内获取 vuex

1. 在组件是可以直接获取 vuex 数据的

@Component({
  // 组件的生命周期钩子函数 写在 @Component 装饰器内
  created() {
    console.log(this.$store.state.str)
  }
})

2. 组件想要和 vuex 做交互，提倡使用 vuex-class 工具做交互，不直接在 vuex 去获取一些辅助方法(mapState…)
3. 然后去装包 运行依赖 vuex-class 或者 npm install --save vuex-class
4. 导入 import { State } from 'vuex-class' 然后就去使用这个工具包里面的方法做展示。如果不知道怎么用就去 npm 官方文档搜索查看工具使用。

import { State, Getter, Action, Mutation, namespace } from "vuex-class";
@Component
export class MyComp extends Vue {
  @State("foo") stateFoo;
  @State((state) => state.bar) stateBar;
  @Getter("foo") getterFoo;
  @Action("foo") actionFoo;
  @Mutation("foo") mutationFoo;
  @someModule.Getter("foo") moduleGetterFoo;

  // 如果省略参数，请使用属性名称
  // 对于每个状态/获取器/操作/变异类型
  @State foo;
  @Getter bar;
  @Action baz;
  @Mutation qux;

  created() {
    this.stateFoo; // -> store.state.foo
    this.stateBar; // -> store.state.bar
    this.getterFoo; // -> store.getters.foo
    this.actionFoo({ value: true }); // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }); // -> store.commit('foo', { value: true })
    this.moduleGetterFoo; // -> store.getters['path/to/module/foo']
  }
}

1211 下午

1. 安装 vuex-module-decorators 运行依赖包
2. 建立模块 modules 文件夹，里面有 company.ts
3. company.ts 先定义一个接口文件 ICompany

• 可以借助 vuex-module-decorators 去创建模块
• VuexModule 创建模块的类 Module 是 vuex 模块的装饰器

company.ts

import { VuexModule, Module } from "vuex-module-decorators";

interface ICompany {
  name: string;
  created_at: string;
  info: string;
}

@Module
export default class Company extends VuexModule {
  companyInfo: ICompany = {
    name: "第嘉",
    created_at: "2020-12-11",
    info: "前端实习营地",
  };
}

index.js

import company from "./modules/company";

export default new Vuex.Store({
  modules: {
    company,
  },
});

Company.vue 内

  created() {
    console.log(this.$store.state.company.companyInfo)
  }