vue3学习之逻辑复用

逻辑复用-组合式函数

 src/views/ad/User.vue

<script setup>
import { useMouse } from "../../js/mouse.js";
import { useFetch } from "../../js/fetch.js";
import { ref, computed } from "vue";

//组合式函数
const { x, y } = useMouse(); // x 和 y 是两个 ref

const todoId = ref(1);
const url = computed(() => {
  return `https://jsonplaceholder.typicode.com/todos/${todoId.value}`;
});
const { data, error } = useFetch(url);
</script>

<template>
  <div>
    <div>
      <p>Mouse position is at: {{ x }}, {{ y }}</p>
    </div>

    <div>
      <p>id:{{ todoId }}</p>
      <button @click="todoId++">Fetch next todo</button>
      <p v-if="!data">Loading...</p>
      <pre v-else-if="error">{{ error }}</pre>
      <pre v-else>{{ data }}</pre>
    </div>
  </div>
</template>

<style scoped>
</style>

 

src/js/fetch.js

import { ref, watchEffect, toValue } from "vue";

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  const fetchData = (dt) => {
    fetch(toValue(url))
      .then((res) => res.json())
      .then((json) => (data.value = json))
      .catch((err) => (error.value = err));
  };

  watchEffect(() => {
    fetchData(url);
  });

  return { data, error };
}

 

 src/js/mouse.js

import { ref } from "vue";
import { useEventListener } from "./event";

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  useEventListener(window, "mousemove", (event) => {
    x.value = event.pageX;
    y.value = event.pageY;
  });

  return { x, y };
}

 

src/js/event.js

import { onMounted, onUnmounted } from "vue";

export function useEventListener(target, event, callback) {
  onMounted(() => target.addEventListener(event, callback));
  onUnmounted(() => target.removeEventListener(event, callback));
}

 

跟踪鼠标位置变化的其它写法：

import { ref, onMounted, onUnmounted } from "vue";

// 按照惯例，组合式函数名以“use”开头
// 每一个调用 useMouse() 的组件实例会创建其独有的 x、y 状态拷贝，因此他们不会互相影响。
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0);
  const y = ref(0);

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener("mousemove", update));
  onUnmounted(() => window.removeEventListener("mousemove", update));

  // 通过返回值暴露所管理的状态
  return { x, y };
}