vue3-事件-toRefs-钩子-fetch

1. 前言

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

---

2. 事件 -toRefs

2.1 模板

转化:{{count}}
修改

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

单值响应式:{{anthorCounter}}

---

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

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉