如何使用Vue生命周期钩子无需点击按钮自动调用API渲染购物车数据

你只需要对Cart.vue做以下修改即可实现自动加载渲染购物车商品的需求： #

核心修改（必做） #

给Cart组件添加mounted生命周期钩子，组件被渲染后会自动执行原关闭按钮绑定的接口调用、隐藏关闭按钮逻辑。
修改后的<script>部分代码如下：

import service from '../service/User'
export default {
    data() {
        return {
            flag: true,
            hide: true,
            booksCount: 0,
            books: [{
                id: 0,
                file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
                name: 'Dont Make me think',
                author: 'Sai',
                price: '1500'
            }, ]
        }
    },
    // 新增生命周期钩子，组件挂载完成自动执行逻辑
    mounted() {
        this.handlesubmit()
        this.Togglebtn()
    },
    methods: {
        flip() {
            this.hide = !this.hide;
        },
        handlesubmit() {
            service.userDisplayCart().then(response => {
                this.books.push(...response.data);
                return response;
            })
        },
        Togglebtn() {
            this.flag = !this.flag;
        },
    }
}

可选优化 #

1. 移除默认占位书籍：如果你不需要初始显示的示例书籍，可以把data中books的初始值改为空数组[]，同时把模板中购物车数量的计算从{{books.length-1}}改成{{books.length}}即可。
2. 删除关闭按钮代码：如果不需要再显示关闭按钮，可以直接删掉<template>中以下代码段：

<button class="close-btn" v-if="flag" @click="handlesubmit();Togglebtn();" type="submit">close</button>

修改完成后，点击Dashboard顶部购物车图标渲染Cart组件时，会自动调用后端接口拉取商品数据并渲染，无需手动点击关闭按钮。

内容的提问来源于stack exchange，提问作者Devops Training