vue3-HOOKS模块化处理

2021-03-02 11:02:28 阅读：1143 来源： 互联网

标签：ref const HOOKS vue3 loading result 模块化 now data

vue3模块化处理

vue3版本的更新,就是能搞更好的重用机制,可以把想要得模块独立出去
eg:显示一个当前时间的工能,在多个页面需要调用的时候不用重复的调用
可以在src目录下，新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里)，
然后再新建一个文件useNowTime.js,这里使用use开头是一个使用习惯，代表是一个抽离出来的模块

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 }

注意:需要将定义的变量nowTime和方法getNowTime通过export导出
使用的时候跟在setup中定义的变量和方法一样使用

使用模块化封装一个远程调用接口的组件
建立useURLAxios.js文件
在文件中定义远程加载需要的变量和axios请求

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

使用时
新增一个.vue文件

<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>

标签：ref,const,HOOKS,vue3,loading,result,模块化,now,data
来源： https://blog.csdn.net/pz1021/article/details/114278938

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3-HOOKS模块化处理

vue3模块化处理