🌱 学会vue3的ref, 12行代码实现"useAxiosGet"

ref

ref 是 vue3 新增的 api, 他的意义就是单独定义一个可以"被追踪"的变量, vue2 中所有变量都需要在data中定义, vue3 中增加了一个setup字段, 在这里我们可以更灵活的定义变量.

vue3

export default defineComponent({
    setup() {
        const countA = ref(1);
        return { count };
    },
});

vue2

export default {
    data() {
        return { countA: 1 };
    },
};

可能有人就问了, 这 vue3 的新 api 好处是什么?

好处就是 js 业务代码可以拆分的更细. 比如上面的例子中的countA, 他是接口返回的数据, 我们一般情况下请求成功之前界面都要显示一个"加载动画", 这个"加载动画"的显示隐藏就需要一个变量控制, 一般我们起名叫isLoading:

vue2

export default {
    data() {
        return { countA: 1, isLoading };
    },

    async mounted() {
        this.isLoading = true;
        const { data } = await axios.get('/api');
        this.countA = data;
        this.isLoading = false;
    },
};

这是 vue2 的写法, 我相信大家都是这么写的, 看起来应该没什么可以继续封装的了吧? 接下来用 vue3 的refapi 尝试进行封装:

vue3

export default defineComponent({
    setup() {
        const [isLoading, countA] = useGet('/api');
        return { isLoading, countA };
    },
});

export function useGet(url) {
    const isLoading = ref(true);
    const dataSource = ref();
    axios
        .get(url)
        .then(({ data }) => {
            dataSource.value = data;
        })
        .finally(() => {
            isLoading.value = false;
        });
    return [isLoading, dataSource];
}

ref 的语法这里不讲, 只需要知道isLoading.value=false是给isLoading赋值即可, 更多请看vue 官方文档

这时候我们发现本来不能抽象的场景, 现在也可以抽象出一个useGet了,叔数数代码刚12行.

v-use-axios

沿着上面的思路, 我对axios做了一个更完整的封装, v-use-axios, 代码不多逻辑也不复杂, 100行左右, 希望有兴趣的小伙伴可以和我一起完善他.

微信群

感谢大家的阅读, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯对微信群的200人限制, 超过200人后必须由群成员拉入)