vueuse

VueUse 是一个基于 Vue 组合式 API 的工具库，里面提供了一系列高效、易用的组合函数，用于简化 Vue 开发，节省开发时间。

Vue 官网：https://vueuse.org/

VueUse 主要特点：

1. 丰富的组合函数
2. TS 支持
3. 轻量级
4. 良好的文档

VueUse 里面有很多的 分类，每个分类下面又有各种丰富的 API：

1. 浏览器 API
   • useFetch：用于发起 HTTP 请求，类似于浏览器的 fetch API。
   • useClipboard：用于操作剪贴板，例如复制文本。
   • useLocalStorage：简化 localStorage 的使用。
   • ......
2. 状态管理
   • useToggle：一个简单的开关状态管理工具。
   • useCounter：用于计数的状态管理工具。
   • .....
3. 传感器
   • useMouse：追踪鼠标的位置和状态。
   • useGeolocation：获取地理位置信息。
4. 用户界面
   • useFullscreen：控制元素的全屏状态。
   • useDark：检测和切换暗模式。
5. 工具函数
   • useDebounce：提供防抖功能。
   • useThrottle：提供节流功能。

基本使用

安装：

npm install @vueuse/core

然后就可以在项目中引入并使用：

<template>
  <div>{{ x }}</div>
  <div>{{ y }}</div>
</template>

<script setup>
import { useMouse } from "@vueuse/core";

const { x, y } = useMouse();
</script>

<style scoped></style>

综合示例：待办事项

要求：用到两个 VueUse 里面的工具方法：useLocalStorage、useToggle

<template>
  <div id="app" class="container">
    <h1>待办事项</h1>
    <div class="input-container">
      <input v-model="newTask" placeholder="添加新的任务" />
      <button @click="addTask">添加</button>
    </div>
    <ul>
      <TodoItem
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        @remove="removeTask(task.id)"
      />
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useLocalStorage, useToggle } from "@vueuse/core";
import TodoItem from "./components/TodoItem.vue";

const newTask = ref("");
// 完成这部分代码，使用 useLocalStorage 来存储任务列表
const tasks = useLocalStorage("tasks", []);

const addTask = () => {
  // 完成这部分代码，使用 useToggle 来切换任务的状态
  if (newTask.value.trim() === "") return;
  // isCompleted 是初始状态
  // toggleCompleted 是切换状态的方法
  // 后面传递的 false 是初始状态
  const [isCompleted, toggleCompleted] = useToggle(false);
  tasks.value.push({
    id: Date.now(),
    text: newTask.value,
    completed: isCompleted,
    toggleCompleted,
  });
  newTask.value = "";
};

const removeTask = (id) => {
  tasks.value = tasks.value.filter((task) => task.id !== id);
};
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}
.input-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
input {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 20px;
}
button {
  width: 100px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #42b983;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
ul {
  list-style: none;
  padding: 0;
}
</style>

---

-EOF-