使用typescript构建Vue应用的实现

interface IState {
 lists: string[]}
export default new Vuex.Store<IState>({
  state: {
    lists: ["vue"] // 定义了state的数据结构，必须要有lists属性，并且属性值为string[]  }
});

获取vuex中的数据时候，还是可以通过this.$store.state.lists获取到，但是我们也可以通过装饰器获取到，要使用vuex的装饰器，我们需要安装vuex-class，如:

import {State, Mutation, Action} from "vuex-class";
export default class App extends Vue {
  // 将从vuex中获取到的lists数据保存到组件的lists属性上
  @State("lists") public lists!: string[];
  @Mutation("say") // 在say()方法前修饰，当say()方法执行的时候就会提交一个say mutation
  public say() {
   console.log("say1");
  }
  @Action("speak") // 在speak()方法前修饰，当speak()方法执行的时候就会提交一个speak action
  public speak(){
  }
  public mounted () {
   this.say();
   this.speak();
  }
}