Vue Hooks用于获取、缓存和更新异步数据的 - vue-query

Vue Hooks用于获取、缓存和更新异步数据的 - vue-query
插件名称 vue-query
版本号 v1.6.1
发布时间 2021年6月17日
插件作者 DamianOsipiuk

vue-query 是一个钩子集合,用于在 Vue 应用程序中获取、缓存和更新异步数据。

安装和下载:

# Yarn
$ yarn add vue-query

# NPM
$ npm i vue-query --save

用法

1. 导入 vue-query。

import { defineComponent } from "vue";
import { useQueryProvider } from "vue-query";
export default defineComponent({
  name: "App",
  setup() {
    useQueryProvider();
  },
});

2. 使用查询。

import { defineComponent } from "vue";
import { useQuery } from "vue-query";
export default defineComponent({
  name: "MyComponent",
  setup() {
    const query = useQuery("todos", getTodos);
    return {
      query,
    };
  },
});

3. 简单的例子。

const id = ref(1);
const queryKey = reactive(["todos", { id }]);
const queryFunction = () => getTodos(id);
const options = reactive({
  enabled: false,
});
const query = useQuery(queryKey, queryFunction, options);

变更日志:

v1.6.1 (06/16/2021)

  • devtools:仅在开发模式下可用的 devtools