Skip to content

API

$useQueryExisting

创建 Query 对象,如果已经存在则直接返回

typescript
@Model()
export class ModelTodo {
  select() {
    return this.$useQueryExisting({
      queryKey: ['select'],
      queryFn: async () => {
        return this.scope.service.todo.select();
      },
    });
  }
}

Options

  • queryKey
    • Required
    • 确保本地缓存的唯一性
    • 自动添加命名空间。比如,ModelTodo 的 Bean 标识是a-demo.model.todo,那么完整的 queryKey 就是['a-demo.model.todo', 'select']
  • queryFn
    • Required
    • 在合适的时机调用此函数获取服务端数据
  • meta
    • Optional
    • 扩展参数

Returns

$useMutationExisting

创建 Mutation 对象,如果已经存在则直接返回

typescript
@Model()
export class ModelTodo {
  insert() {
    return this.$useMutationExisting<void, ServiceTodoIntertParams>({
      mutationKey: ['insert'],
      mutationFn: async params => {
        return this.scope.service.todo.insert(params);
      },
      onSuccess: () => {
        this.$invalidateQueries({ queryKey: ['select'] });
      },
    });
  }
}

Options

  • mutationKey
    • Required
    • 确保本地缓存的唯一性
    • 自动添加命名空间。比如,ModelTodo 的 Bean 标识是a-demo.model.todo,那么完整的 mutationKey 就是['a-demo.model.todo', 'insert']
  • mutationFn
    • Required
    • 用于执行变更操作
  • onSuccess
    • Optional
    • 变更操作成功时调用
  • onError
    • Optional
    • 变更操作失败时调用
  • onSettled
    • Optional
    • 变更操作成功或失败均调用

Returns

$invalidateQueries

将 Query 对象设为失效,以便重新获取数据

typescript
this.$invalidateQueries({ queryKey: ['select'] });
this.$invalidateQueries({ queryKey: ['get', params.id] });

Query Filters

$useQueryLocal

创建基于 localstorage 的 Query 对象

typescript
export class ModelUser extends BeanModelBase<ScopeModule> {
  user?: ServiceUserEntity;

  protected async __init__() {
    this.user = this.$useQueryLocal({
      queryKey: ['user'],
    });
  }
}

Options

  • queryKey
    • Required
  • meta
    • Optional
    • 扩展参数

$useQueryCookie

创建基于 cookie 的 Query 对象

typescript
export class ModelUser extends BeanModelBase<ScopeModule> {
  token?: string;

  protected async __init__() {
    this.token = this.$useQueryCookie({
      queryKey: ['token'],
    });
  }
}

Options

  • queryKey
    • Required
  • meta
    • Optional
    • 扩展参数

Query Meta

在创建 Query 对象时,可以传入 meta 扩展参数

比如,我们可以把当前主题的darkMode属性存入 cookie。darkMode 的类型是true | false | 'auto',但是在存入 cookie 时类型均是字符串,那么在下次从 cookie 取值时就需要进行转换操作

typescript
darkMode: ThemeDarkMode; // auto/true/false

protected async __init__() {
  this.darkMode = this.$useQueryCookie({
    queryKey: ['themedarkmode'],
    meta: {
      persister: {
        deserialize: value => {
          value = value === 'true' ? true : value === 'false' ? false : !value ? undefined : value;
          return this.$deserializeCookie(value);
        },
      },
      defaultData: 'auto',
    },
  });
}
  • meta.persister
    • serialize:自定义序列化方法
    • deserialize:自定义反序列化方法
  • meta.defaultData
    • 提供缺省值,只针对同步数据有效

基于 MIT 许可发布