Saltar al contenido principal

useController()

Controller ofrece métodos con tipado seguro para acceder al store y despachar acciones.

Por ejemplo, fetch, invalidate y setResponse

<script setup lang="ts">
  import { useController } from '@data-client/vue';
  import { MyResource } from './resources';

  const props = defineProps<{ id: string }>();
  const ctrl = useController();

  const handleRefresh = async () => {
    await ctrl.fetch(MyResource.get, { id: props.id });
  };

  const handleSuspend = async () => {
    await ctrl.invalidate(MyResource.get, { id: props.id });
  };

  const handleLogout = () => {
    ctrl.resetEntireStore();
  };
</script>

useController() debe llamarse dentro de <script setup> (o setup()), y requiere que el DataClientPlugin esté instalado. El mismo Controller también está disponible en las plantillas y en la Options API como $dataClient.

Ejemplos​

Envío de formularios​

fetch devuelve la respuesta desnormalizada, igual que el tipo de retorno de useSuspense(). Esto permite usar métodos de Entity como pk().

CreatePost.vue
<script setup lang="ts">
  import { useController } from '@data-client/vue';
  import { useRouter } from 'vue-router';
  import { PostResource } from './PostResource';

  const ctrl = useController();
  const router = useRouter();

  const handleSubmit = async (e: Event) => {
    e.preventDefault();
    const post = await ctrl.fetch(
      PostResource.getList.push,
      new FormData(e.target as HTMLFormElement),
    );
    post.title;
    post.computedField;
    router.push(`/post/${post.pk()}`);
  };
</script>

<template>
  <form @submit="handleSubmit"><!-- fields --></form>
</template>

Actualización directa de una entidad​

Usa set para actualizaciones inmediatas sin peticiones de red. Admite actualizaciones funcionales para evitar condiciones de carrera.

VoteButton.vue
<script setup lang="ts">
  import { useController } from '@data-client/vue';
  import { Article } from './Article';

  const props = defineProps<{ articleId: string }>();
  const ctrl = useController();

  const vote = () =>
    ctrl.set(Article, { id: props.articleId }, article => ({
      ...article,
      votes: article.votes + 1,
    }));
</script>

<template>
  <button @click="vote">Vote</button>
</template>

Invalidar después de una mutación​

Fuerza la obtención de nuevo de los datos relacionados con invalidate o expireAll.

ClearUserCache.vue
<script setup lang="ts">
  import { useController } from '@data-client/vue';
  import { UserResource } from './UserResource';

  const ctrl = useController();

  const handleClear = async () => {
    // invalidate() causes suspense; expireAll() refetches silently
    ctrl.expireAll(UserResource.get);
    ctrl.expireAll(UserResource.getList);
  };
</script>

<template>
  <button @click="handleClear">Refresh user data</button>
</template>
consejo

Para un mejor rendimiento y consistencia, es preferible incluir las actualizaciones de efectos secundarios en las respuestas de las mutaciones.

Precarga​

Usa fetchIfStale para precargar sin volver a obtener datos que ya están frescos.

ArticleLink.vue
<script setup lang="ts">
  import { useController } from '@data-client/vue';
  import { ArticleResource } from './ArticleResource';

  const props = defineProps<{ id: string }>();
  const ctrl = useController();

  const prefetch = () =>
    ctrl.fetchIfStale(ArticleResource.get, { id: props.id });
</script>

<template>
  <RouterLink :to="`/article/${id}`" @mouseenter="prefetch">
    Read more
  </RouterLink>
</template>

Actualizaciones por websocket​

Rellena la caché con datos externos mediante set.

useWebsocket.ts
import { onMounted, onUnmounted } from 'vue';
import { useController } from '@data-client/vue';
import { EntityMap } from './resources';

export function useWebsocket(url: string) {
  const ctrl = useController();
  let ws: WebSocket;

  onMounted(() => {
    ws = new WebSocket(url);
    ws.onmessage = event => {
      const { entity, args, data } = JSON.parse(event.data);
      ctrl.set(EntityMap[entity], args, data);
    };
  });
  onUnmounted(() => ws?.close());
}
aviso

Para uso en producción, implementa un Manager para flujos de datos en lugar de hooks de ciclo de vida a nivel de componente. Los Managers manejan el ciclo de vida de la conexión de forma global y funcionan con SSR.

Aplicación de tareas​

Explora el ejemplo vue-todo-app

Abrir en StackBlitzVer código fuente

More Demos