vue3-HOOKS模块化处理方式

import { ref } from "vue";
const nowTime = ref("00:00:00");
const getNowTime = () => {
    const now = new Date();
    const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
    const minu =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    const sec =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    nowTime.value = hour + ":" + minu + ":" + sec;
    setTimeout(getNowTime, 1000);
};
export { nowTime, getNowTime }

import {ref} from 'vue'
import axios from 'axios';
function usURLAxios(url) {
    const result = ref(null)
    const loading = ref(true)
    const loaded =ref(false)
    const error =ref(null)
    axios.get(url).then((res)=>{
        loading.value = false
        loaded.value = true
        result.value = res.data
    }).catch(e=>{
        error.value = e
        loading.value = false
    })
    return {
        result,
        loading,
        loaded,
        error
    }
}
export default usURLAxios

<template>
  <div>
    <button @click="getImg">随机展示图片</button>
    <div v-if="thisloading">Loading.....</div>
    <img v-if="thisloaded" :src="thisresult.message" />
    <div></div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import useUrlAxios from "../hooks/useURLAxios";
export default {
  setup() {
    const data = reactive({
      thisresult: null,
      thisloading: true,
      thisloaded: false,
      getImg: () => {
        const { result, loading, loaded } = useUrlAxios(
          "https://dog.ceo/api/breeds/image/random"
        );
        data.thisresult = result;
        data.thisloading = loading;
        data.thisloaded = loaded;
        console.log(
          22222,
          data.thisresult,
          data.thisloading,
          data.thisloaded,
          result,
          loaded,
          loading
        );
      },
    });
    const refData = toRefs(data);
    return { ...refData };
  },
};
</script>
<style lang="scss" scoped>
</style>

import { useData, useMounted } from 'vue-hooks';
 
export function windowwidth() {
  const data = useData({
    width: 0
  })
 
  useMounted(() => {
    data.width = window.innerWidth
  })
 
  // this is something we can consume with the other hook
  return {
    data
  }
}

import { useData, useMounted } from 'vue-hooks';
 
export function windowwidth() {
  const data = useData({
    width: 0
  })
 
  useMounted(() => {
    data.width = window.innerWidth
  })
 
  // this is something we can consume with the other hook
  return {
    data
  }
}

// the data comes from the other hook
export function logolettering(data) {
  useMounted(function () {
    // this is the width that we stored in data from the previous hook
    if (data.data.width > 1200) {
      // we can use refs if they are called in the useMounted hook
      const logoname = this.$refs.logoname;
      Splitting({ target: logoname, by: "chars" });
 
      TweenMax.staggerFromTo(".char", 5,
        {
          opacity: 0,
          transformOrigin: "50% 50% -30px",
          cycle: {
            color: ["red", "purple", "teal"],
            rotationY(i) {
              return i * 50
            }
          }
        },
        ...

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";
 
export default {
  hooks() {
    logolettering(windowwidth());
  }
};
</script>