vue-property-decorator

  1. import {
  2.     Vue,
  3.     Component,
  4.     Inject,
  5.     Provide,
  6.     Prop,
  7.     Model,
  8.     Watch,
  9.     Emit,
  10.     Mixins,
  11. } from "vue-property-decorator";
  • 组件声明
    创建组件的方式变成如下 ```javascript import { Component, Prop, Vue, Watch } from “vue-property-decorator”;

@Component export default class Test extends Vue {}

  2. - data 对象
  3. ```javascript
  4. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  6.   @Component
  7.   export default class Test extends Vue {
  8.     private name: string;
  9.   }

  • Prop 声明

    1. @Prop({ default: false }) private isCollapse!: boolean;
    2. @Prop({ default: true }) private isFirstLevel!: boolean;
    3. @Prop({ default: "" }) private basePath!: string;
    • !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
    • @Prop(options: (PropOptions | Constructor[] | Constructor) = {})
    • PropOptions，可以使用以下选项：type，default，required，validator
    • Constructor[]，指定 prop 的可选类型
    • Constructor，例如 String，Number，Boolean 等，指定 prop 的类型

  • method
    js 下是需要在 method 对象中声明方法，现变成如下

    1. public clickFunc(): void {
    2. console.log(this.name)
    3. console.log(this.msg)
    4. }

  • Watch 监听属性

    1. @Watch("$route", { immediate: true })
    2. private onRouteChange(route: Route) {
    3. const query = route.query as Dictionary<string>;
    4. if (query) {
    5.   this.redirect = query.redirect;
    6.   this.otherQuery = this.getOtherQuery(query);
    7. }
    8. }
    • @Watch(path: string, options: WatchOptions = {})
    • options 包含两个属性 immediate?:boolean 侦听开始之后是否立即调用该回调函数 / deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数
    • @Watch(‘arr’, { immediate: true, deep: true })
    • onArrChanged(newValue: number[], oldValue: number[]) {}

  • computed 计算属性

    1. public get allname() {
    2.     return 'computed ' + this.name;
    3. }

  • allname 是计算后的值，name 是被监听的值

  • 生命周期函数

    1. public created(): void {
    2.     console.log('created');
    3. }
    5. public mounted():void{
    6.     console.log('mounted')
    7. }

  • emit 事件 ```javascript import { Vue, Component, Emit } from “vue-property-decorator”; @Component export default class MyComponent extends Vue { count = 0; @Emit() addToCount(n: number) {

    1.   this.count += n;

    } @Emit(“reset”) resetCount() {

    1.   this.count = 0;

    } @Emit() returnValue() {

    1.   return 10;

    } @Emit() onInputChange(e) {

    1.   return e.target.value;

    } @Emit() promise() {

    1.   return new Promise((resolve) => {
    2.       setTimeout(() => {
    3.           resolve(20);
    4.       }, 0);
    5.   });

    } }

  2. - 使用 js 写法
  3. ```javascript
  4. export default {
  5.   data() {
  6.     return {
  7.       count: 0
  8.     }
  9.   },
  10.   methods: {
  11.     addToCount(n) {
  12.       this.count += n
  13.       this.$emit('add-to-count', n)
  14.     },
  15.     resetCount() {
  16.       this.count = 0
  17.       this.$emit('reset')
  18.     },
  19.     returnValue() {
  20.       this.$emit('return-value', 10)
  21.     },
  22.     onInputChange(e) {
  23.       this.$emit('on-input-change', e.target.value, e)
  24.     },
  25.     promise() {
  26.       const promise = new Promise(resolve => {
  27.         setTimeout(() => {
  28.           resolve(20)
  29.         }, 0)
  30.       })
  31.       promise.then(value => {
  32.         this.$emit('promise', value)
  33.       })
  34.     }
  35.   }
  36. }
  • @Emit(event?: string)
  • @Emit 装饰器接收一个可选参数，该参数是$Emit 的第一个参数，充当事件名。如果没有提供这个参数，$Emit 会将回调函数名的 camelCase 转为 kebab-case，并将其作为事件名
  • @Emit 会将回调函数的返回值作为第二个参数，如果返回值是一个 Promise 对象，$emit 会在 Promise 对象被标记为 resolved 之后触发
  • @Emit 的回调函数的参数，会放在其返回值之后，一起被$emit 当做参数使用

vuex-module-decorators

在使用 store 装饰器之前，先过一下传统的 store 用法吧

  1. export default {
  2.   namespaced: true,
  3.   state: {
  4.     foo: ""
  5.   },
  6.   getters: {
  7.     getFoo(state) { return state.foo }
  8.   },
  9.   mutations: {
  10.     setFooSync(state, payload) {
  11.       state.foo = payload
  12.     }
  13.   },
  14.   actions: {
  15.     setFoo({ commit }, payload) {
  16.       commot("getFoo", payload)
  17.     }
  18.   }
  19. }

然后开始使用vuex-module-decorators

  1. import {
  2.   VuexModule,
  3.   Mutation,
  4.   Action,
  5.   getModule,
  6.   Module
  7. } from "vuex-module-decorators";

  • VuexModule 用于基本属性

    1. export default class TestModule extends VuexModule { }

  • VuexModule 提供了一些基本属性，包括 namespaced,state,getters,modules,mutations,actions,context

  • @Module 标记当前为 module ``` @Module({ dynamic: true, store, name: “settings” }) class Settings extends VuexModule implements ISettingsState {

}

  2. - module 本身有几种可以配置的属性:
  3.    - namespaced:boolean 启/停用 分模块
  4.    - stateFactory:boolean 状态工厂
  5.    - dynamic:boolean 在 store 创建之后，再添加到 store 中。 开启 dynamic 之后必须提供下面的属性
  6.    - name:string 指定模块名称 * store:Vuex.Store 实体 提供初始的 store
  8. - [@Mutation ](/Mutation )  标注为 mutation

@Mutation private SET_NAME(name: string) { // 设置用户名 this.name = name; }

  2. - [@Action ](/Action )  标注为 action

@Action public async Login(userInfo: { username: string; password: string }) { // 登录接口，拿到token let { username, password } = userInfo; username = username.trim(); const { data } = await login({ username, password }); setToken(data.accessToken); this.SET_TOKEN(data.accessToken); }

  2. - getModule 得到一个类型安全的 store，module 必须提供 name 属性

export const UserModule = getModule(User); ```