美文网首页vue3
vue3-事件-toRefs-钩子-fetch

vue3-事件-toRefs-钩子-fetch

作者: 云高风轻 | 来源:发表于2021-09-13 17:34 被阅读0次

    1. 前言

    v3事件这块变化不大
    但是新增了 单值响应式相关内容


    2. 事件 -toRefs

    2.1 模板

    <p>转化:{{count}}</p>
    <button @click="add">修改</button>
    

    2.2 导入相关

        import {
            reactive,
            ref,
            toRefs,
            onMounted
        } from 'vue'
    

    2.3 添加事件 toRefs

    setup() {
                // 响应式对象
                const state = reactive({
                    count: 0,
                })
                //*****************************自定义函数 */
                // 点击事件
                const add = (event) => {
                    state.count++
                }
                return {
                                    ...toRefs(state),
                    add
                }
    }
    

    1.注意这些 state自定义函数 都是直接写在 setup里面的
    2.上节课说state 不能使用...展开会破坏结构,在模板使用的时候每次都会多加1层,比较麻烦
    3.所以使用toRefs不会破坏内部结构,使用的时候直接使用就行


    3. ref 单值响应式

    只针对一个值

    3.1 简要代码

            const anthorCounter = ref(1)
            return {
                    anthorCounter,
                    ...toRefs(state),
                    add
                }
    

    返回的时候 直接返回就行


    3.2 使用

    <p>单值响应式:{{anthorCounter}}</p>
    

    4. onMounted

    直接写到 setUp里面

    4.1 基本代码

        // 响应式对象
                const state = reactive({
                    count: 0,
                    msg: "提示"
                })
    //*****************************自定义函数 */
                // 点击事件
                const add = (event) => {
                    console.log("-------", event)
                    state.count++
                    console.log("state", state)
                }
    // Ref类型
                // 单值响应式 可以直接用
                const anthorCounter = ref(1)
                // ******************* 生命周期 钩子
    onMounted(() => {
                    console.log("mounted  挂载的时候执行")
                    fetch("https://xx.yzs.org/v1/?type=1").then(res => {
                    console.log("res 拦截:",res.text())
                    }).then(res=>{
                        console.log("res:",res)
                        state.msg = "成功"
                        //这点可以看文档 单值响应式 必须 加 value
                        anthorCounter.value =  10
                    }).catch(err=>{
                        console.log("错误信息:",err)
                    }).finally(()=>{
                        console.log("完成:")
                    })
                })
    //  toRefs 全部转换
                return {
                    anthorCounter,
                    ...toRefs(state),
                    add
                }
    

    4.2 分析

    1.单值响应式 ref文档 必须 加 value anthorCounter.value = 10
    2.fetch用法
    3.钩子也是写在setUp里面


    4.3 fetch封装

    src/api/fetch.js

    const fetchGet = function(url, params) {
        let list = [];
        for (let key in params) {
            let str = `${key}=${params[key]}`
            list.push(str);
        }
        const data = list.join('&');
        let allUrl = `${url}?${data}`;
        // debugger
        return fetch(allUrl).then(res => {
            return res.json();
        }).catch(err => {
            console.log(err);
        });
    };
    const fetchPost = function(url, params) {
        let formData = new FormData();
        for (let key in params) {
            formData.append(key, params[key])
        };
        return fetch(url, {
            body: formData,
            method: 'POST'
        }).then(res => {
            return res.json();
        }).catch(err => {
            console.log(err);
        })
    };
    const fetchAll = function(url, params, method='GET') {
        if (method === 'GET' || method === 'get') {
            return fetchGet(url, params);
        } 
        return fetchPost(url, params);
    }
    export default {
        fetchGet,
        fetchPost,
        fetchAll
    }
    

    4.4 fetch使用

    引入

        import myFetch from '@/api/fetch.js';
    

    使用

    onMounted(() => {
                    console.log("mounted  挂载的时候执行")
                myFetch.fetchGet("https://xx.yzs.org/v1", {
                        type: "1"
                    }).then(res => {
                        singState.name = res.name
                        console.log(res);
                    }).catch(err => {
                        console.log(err);
                    })
    

    参考资料

    ref
    fetch用法


    初心

    我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理;
    如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
    共勉

    相关文章

      网友评论

        本文标题:vue3-事件-toRefs-钩子-fetch

        本文链接:https://www.haomeiwen.com/subject/zpufgltx.html