VueUse的各个钩子使用详解

一、State
1、createGlobalState

<!-- Counter.vue -->
<template>
  <div>
    <p>当前计数值：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { createGlobalState } from '@vueuse/core';

// 使用 createGlobalState 创建全局状态
const useGlobalCount = createGlobalState(() => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const reset = () => {
    count.value = 0;
  };

  // 返回状态和操作方法
  return {
    count,
    increment,
    reset,
  };
});

export default {
  setup() {
    // 获取全局状态和操作方法
    const { count, increment, reset } = useGlobalCount();

    return {
      count,
      increment,
      reset,
    };
  },
};
</script>

在 Vue 3 中使用 VueUse 库的 createGlobalState 函数创建全局状态非常简单。下面是一个示例，演示了如何使用 createGlobalState 来创建一个全局的计数器状态：

vue
Copy code
<!-- Counter.vue -->
<template>
  <div>
    <p>当前计数值：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { createGlobalState } from '@vueuse/core';

// 使用 createGlobalState 创建全局状态
const useGlobalCount = createGlobalState(() => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const reset = () => {
    count.value = 0;
  };

  // 返回状态和操作方法
  return {
    count,
    increment,
    reset,
  };
});

export default {
  setup() {
    // 获取全局状态和操作方法
    const { count, increment, reset } = useGlobalCount();

    return {
      count,
      increment,
      reset,
    };
  },
};
</script>
在这个示例中，我们创建了一个名为 useGlobalCount 的全局状态，该状态包含一个计数器和两个方法：增加计数和重置计数。然后在组件中使用 useGlobalCount 获取全局状态和方法，并在模板中进行渲染和绑定点击事件。

现在，我们可以在任何组件中导入 useGlobalCount 并调用它，以获取全局的计数器状态和相关操作方法，从而实现在不同组件之间共享状态的目的。