useServer

<template>
  <div>
    <div>data: {{ data }}</div>
    <el-button @click="run" type="primary" :loading="loading">run</el-button>
  </div>
</template>

<script setup lang="jsx">
import { useServer } from "fast-crud";
const { data, run, loading } = useServer({
  api: "user.list",
  default: ["default 能够协助设置初始数据"],
});
</script>

<template>
  <div>
    <div>data: {{ data }}</div>
    <el-button @click="run" type="primary" :loading="loading">run</el-button>
  </div>
</template>

<script setup lang="jsx">
import { useServer } from "fast-crud";
const { data, run, loading } = useServer({
  api: "user.list",
  autoRun: true,
});
</script>

<template>
  <div>
    <h4>1. 双向绑定查询条件</h4>
    <el-input v-model="bindServer.config.data.value.name"></el-input>
    <el-button class="mt-10px" @click="bindServer.run" type="primary"
      >run</el-button
    >
    <h4 class="mt-10px">2. 传入响应式对象</h4>
    <el-button class="mt-10px" @click="refServer.run" type="primary"
      >run</el-button
    >
    <h4 class="mt-10px">3. 通过run传入params</h4>
    <el-button @click="toRunServer" type="primary">run</el-button>
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { useServer } from "fast-crud";

const bindServer = useServer({
  api: "full",
  data: {
    name: "hello",
  },
});

const params = ref({
  title: "hello",
});
const refServer = useServer({
  api: "full",
  data: params,
});

const runServer = useServer({
  api: "full",
});
function toRunServer() {
  runServer.run({ data: { des: "test" } });
}
</script>

<template>
  <div>
    <div>data: {{ data }}</div>
    <el-button class="mt-10px" @click="run" type="primary" :loading="loading"
      >run</el-button
    >
  </div>
</template>

<script setup lang="jsx">
import { useServer } from "fast-crud";

const { data, run, loading } = useServer({
  api: "user.list",
  beforeSetData(res) {
    return res.data.map((item) => item.type);
  },
});
</script>

<template>
  {{ params }}
  <div>
    <div>data: {{ data }}</div>
    <el-button @click="randomNum" type="primary" :loading="loading"
      >run</el-button
    >
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { useServer } from "fast-crud";

const params = ref({
  num: 0,
});

const { data, loading } = useServer({
  api: "user.list",
  deps: [params],
  default: ["default 能够协助设置初始数据"],
});

function randomNum() {
  params.value.num = Math.random();
}
</script>

<template>
  <div>
    <h3>debounce</h3>
    <div>data: {{ data }}</div>
    <el-button @click="run" type="primary" :loading="loading">run</el-button>
  </div>
</template>

<script setup lang="jsx">
import { useServer } from "fast-crud";

const { data, run, loading } = useServer({
  api: "user.list",
  debounceTime: 2000,
  default: ["default 能够协助设置初始数据"],
});
</script>

<template>
  <div>
    <h3>successMessage</h3>
    <div>data: {{ data }}</div>
    <el-button @click="run" type="primary" :loading="loading">run</el-button>
  </div>
</template>

<script setup lang="jsx">
import { useServer } from "fast-crud";

const { data, run, loading } = useServer({
  api: "user.list",
  data: {
    num: 1,
  },
  successMessage: "操作成功",
  default: ["default 能够协助设置初始数据"],
});
</script>