yarn list --pattern vuex-module-decorators

news2024/12/29 0:30:58

dgq@dgqdeMac-mini spid-admin % yarn list --pattern vuex-module-decorators
yarn list v1.22.22
└─ vuex-module-decorators@0.16.1
✨  Done in 0.24s.

好的，这段代码是一个典型的 Vuex 模块定义，使用了 vuex-module-decorators 库。这个库为 Vuex 提供了基于装饰器的 API，使得模块的定义更加简洁和面向对象。

我来详细解释一下这段代码的各个部分：

1. 导入模块和 API：

spid-admin/src/store/modules/user.ts

import { VuexModule, Module, Action, Mutation, getModule } from 'vuex-module-decorators'
import { login, logout, getUserInfo, phoneLogin } from '@/api/users'
import { getToken, setToken, removeToken } from '@/utils/cookies'
import router, { resetRouter } from '@/router'
import { PermissionModule } from './permission'
import { TagsViewModule } from './tags-view'
import store from '@/store'

vuex-module-decorators：这个库提供了 @Module, @Action, @Mutation, getModule 等装饰器，用于简化 Vuex 模块的定义。
login, logout, getUserInfo, phoneLogin：这些是从 @/api/users 导入的 API 函数，用于与后端进行用户相关的交互（登录、登出、获取用户信息等）。
getToken, setToken, removeToken：这些函数来自 @/utils/cookies，用于操作浏览器 Cookie，存储和读取 token 信息。
router, resetRouter：来自 @/router 的路由实例和重置路由的函数。
PermissionModule, TagsViewModule：来自 permission 和 tags-view 的 Vuex 模块。
store：从 @/store 导入的 Vuex 的 store 实例。

2. 定义接口 IUserState

export interface IUserState {
  token: string
  id: number
  username: string
  avatar: string
  remark: string
  roles: string[]
  phone: string
  status: number
  pid: number
  passwordAttemptCount: number
}

IUserState 定义了用户状态的数据结构，包括 token, id, username, avatar 等属性，确保数据类型的正确性。

3. 定义 Vuex 模块 User

@Module({ dynamic: true, store, name: 'user' })
class User extends VuexModule implements IUserState {
    // ...
}

@Module({ dynamic: true, store, name: 'user' })：
- @Module 是一个装饰器，用于将类标记为一个 Vuex 模块。
- dynamic: true 表示该模块是动态注册的，而不是在 store 初始化时静态注册。
- store 接收 Vuex store 的实例。
- name: 'user' 指定该模块在 store 中的名称。
class User extends VuexModule implements IUserState：
- User 类继承自 VuexModule，使其具有 Vuex 模块的功能。
- implements IUserState 表示该类必须实现 IUserState 接口中定义的所有属性。

4. 定义模块状态 (state)

  public token = getToken() || ''
  public id = -100
  public username = ''
  public avatar = ''
  public remark = ''
  public roles: string[] = []
  public phone = ''
  public status = -100
  public pid = -100
  public passwordAttemptCount = -100
  public introduction = ''

这些是模块的初始状态。public 表示这些属性可以被外部访问。
token 的初始值从 Cookie 中读取。
其他状态都有默认值，表示在未登录状态。

5. 定义 Mutations

  @Mutation
  private SET_TOKEN(token: string) {
    this.token = token
  }
  // ... 其他 mutation

@Mutation 是一个装饰器，用于声明修改状态的方法。
Mutation 方法接收一个 payload（数据），并使用 this 关键字修改模块的状态。
private 修饰符表明这些方法只能在模块内部被调用。

6. 定义 Actions

 @Action({ rawError: true })
  public async Login(userInfo: { username: string, password: string}) {
    // ...
  }

  @Action({ rawError: true })
  public async GetUserInfo() {
      // ...
  }

  // ... 其他 action

@Action 是一个装饰器，用于声明执行异步操作的方法。
Action 方法接收一个 payload（数据），并使用 this 关键字访问模块的状态和调用 mutations。
{ rawError: true } 表示该 action 抛出的错误将直接抛出，而不是包装在 Promise 中。
Action 中调用 API，并通过 mutation 方法更新状态。

7. getModule 和导出 UserModule

export const UserModule = getModule(User)

getModule(User) 是 vuex-module-decorators 提供的函数，用于获取 User 模块的实例。
export const UserModule 将 User 模块实例导出，以便在其他模块中使用。

总结：

这段代码使用 vuex-module-decorators 简化了 Vuex 用户模块的定义，包括：

状态 (state): 存储用户信息，如 token、id、用户名等。
Mutations: 用于同步更新状态的方法（例如设置 token、设置用户信息等）。
Actions: 用于异步操作和提交 mutations 的方法（例如登录、登出、获取用户信息等）。

如何使用：

在组件中，你可以通过 UserModule 访问用户模块的状态和调用 action：

    import { UserModule } from '@/store/modules/user';

    // ...

    mounted() {
        console.log(UserModule.username); // 获取用户名
    }
    methods: {
        async handleLogin() {
            await UserModule.Login({username:'admin', password:'password'}) // 调用登录 action
        }
    }