vue-cli3.0 + Vuex + typescript：M

vue+typescript之后，vuex调用再也不是从前的调用方式了，需要加类型校验了

对比vuex在使用ts前后写法

在ts中使用vuex，需要在vue问价中导入对应的vuex装饰器

 import {State, Mutation} from 'vuex-class';

1. state

ts前

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

ts后

@State private count !: number 
// 这个number直接当做变量调用即可

2. mutation

ts前

store.commit({
  type: 'increment',
  amount: 10
})

ts后

@Mutation private increment!: (amount: number) => void;

handleClick():void{
  this.increment(10)
}

其他用法：

  @State private setting!: SettingState;
  @Getter private syncData: any;
  @Mutation private changeHourly!: (checked: boolean) => void;
  @Action private sync!: (data: any) => void;

SettingState接口

export interface SettingState {
  checked: boolean;
  url: string;
}