灏天阁

vue3.2/Vite/Ts20: 用户仓库数据 ts 类型定义

· Yin灏

修改用户数据的 ts 类型

  • src / api / user / type.ts
interface dataType {
  token?: string;
  message?: string;
}

export interface loginResponseData {
  code: number;
  data: dataType;
}

用户小仓库里面添加 ts 类型

  • 新建 src / store / modules / types / type.ts
  • 用来定义小仓库数据 state 的类型
interface UserState {
  token: string | null;
}

用户小仓库引用新修改的 ts 类型

  • src / store / modules / user.ts
import { defineStore } from "pinia";
import { reqLogin } from "@/api/user";
import type { loginForm, loginResponseData } from "@/api/user/type";

// 引入 state ts 类型
import type { UserState } from "./types/type";

let useUserStore = defineStore("User", {
  state: (): UserState => {
    return {
      token: localStorage.getItem("TOKEN") || "",
    };
  },
  actions: {
    async userLogin(data: loginForm) {
      let result: loginResponseData = await reqLogin(data);
      if (result.code === 200) {
        // 断言
        this.token = result.data.token as string;
        // 断言
        localStorage.setItem("Token", result.data.token as string);
        return "ok";
      } else {
        return Promise.reject(new Error(result.data.message));
      }
    },
  },
  getters: {},
});

export default useUserStore;

- Book Lists -