# Vue 实战：TypeScript 下的 Vuex

我们已经基本完成了 UI 层面的编写，接下来我们需要对逻辑层进行实现。

我们选择全局状态管理工具 vuex，但是在 TypeScript 中 vuex 往往要与 vuex-class 进行配合，它同样提供了多个装饰器供我们使用。

首先安装 vuex-class：

npm i -S vuex-class

@前端进阶之旅: 代码已经复制到剪贴板

本节对应源代码在v1.2

# 创建 todo 任务逻辑

我们可以 src/store/state.ts 中先定义 State 的类型和初始值。

export enum Mode {
  edit, // 处于编辑状态
  finish // 处于编辑完成状态
}

export interface ITodoItem {
  id: string; // todo任务的id
  name: string; // todo 任务名称
  isDone: boolean; // 任务是否完成
  iconName: string; // 任务的图标
  color: string; // 任务底色
  mode: Mode; // 编辑状态
}

export interface State {
  todoList: Array<ITodoItem>;
}

export const state: State = {
  todoList: []
};

@前端进阶之旅: 代码已经复制到剪贴板

然后我们在 src/store/mutations.ts 中编写创建 todo 的逻辑，其实很简单，我们接受一个 todo 对象，把它添加到 todoList 数组中即可。

export const mutations: MutationTree<State> = {
  // 创建 todo
  createTodoItem(state: State, todoItem: ITodoItem) {
    state.todoList.push(todoItem);
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

那么如何在组件中使用 mutations 呢？

import { Component, Prop, Vue } from "vue-property-decorator";
import { Icon } from "vant";
import { Mutation, State } from "vuex-class";
import { ITodoItem, Mode } from "../store/state";
import { _ } from "../utils";
@Component({
  components: {
    [Icon.name]: Icon
  }
})
export default class Header extends Vue {
  @State private todoItem!: ITodoItem[];
  @Mutation private createTodoItem!: (todo: ITodoItem) => void;

  private createTodoItemHandle() {
    const newItem: ITodoItem = {
      id: _.uuid(),
      name: "新任务",
      isDone: false,
      mode: Mode.edit,
      iconName: "yingtao",
      color: "#FFCC22"
    };
    this.createTodoItem(newItem);
  }

}

@前端进阶之旅: 代码已经复制到剪贴板