在vue组件中添加到购物车后，如何自动添加通知？

Question

我要添加到购物车的vue组件是这样的：

 class _ContactPage extends State<ContactsPage> {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          home: new Scaffold(
              appBar: new AppBar(
                title: widget.appBarTitle,

如果点击添加到购物车，它将把数据保存在会话存储中

我有global.js，并在那里设置了会话存储。像这样：

<template> 
    <div class="wrapper">
        ...
        <b-btn variant="warning" class="btn-square mt-2 col-md-12" @click="addToCart(item)"><i class="fa fa-cart-arrow-down"></i> Add to cart</b-btn>
        ...
    </div>
</template>
<script>
    export default {
        ...
        methods: {
            addToCart(item) {
                let data = [{
                    number: item.number,
                    price: item.price,
                    description: item.description,
                    quantity: this.quantity,
                }]
                if (this.$session.get(SessionKeys.Cart) === undefined || this.$session.get(SessionKeys.Cart) === null) {
                    this.$session.set(SessionKeys.Cart, data);
                }
                else {
                    let newData = this.$session.get(SessionKeys.Cart)
                    newData.push(data[0])
                    this.$session.set(SessionKeys.Cart, newData);
                }
            }
        }
    }
</script>

而且我有vue组件标题来显示这样的通知购物车：

export const SessionKeys = {
    Cart: 'logCart'
};

如果我单击“添加到购物车”，则标题中的通知不会自动更新。我必须先刷新页面

当单击添加到购物车时，如何使其自动更新？

似乎它将使用<template> <b-navbar-nav> <div class="d-md-down-none mr-2" @click="showCart = !showCart" v-show="!verified"> <i class="icon-basket"></i> <b-badge pill variant="danger" class="ml-1">{{items.length}}</b-badge> </div> <div class="cart" v-show="showCart"> <div v-show="items.length > 0" class="m-0 p-1 border "> <b-list-group> <b-list-group-item v-for="item in items" transition="fade"> <b-row> <b-col cols="2" class="m-0 p-0"> <b-img src="./img/products/test.jpg" height="50" /> </b-col> <b-col class="p-0 pl-3"> <i class="fa fa-dropbox"></i><small><b>{{item.description }}</b></small><br/> <small class="p-1"><i class="fa fa-check"></i> {{ item.quantity }} pcs x Rp. {{ item.price }}</small><br/> <small class="p-1"><i class="fa fa-check"></i> Sub: Rp. {{item.quantity * item.price}}</small> <i class="fa fa-trash text-danger float-right" @click="removeFromCart(item)"></i> </b-col> </b-row> </b-list-group-item> <b-list-group-item class="p-0 align-middle"> <div class="bg-secondary text-lg-center text-dark font-lg font-weight-bold">Rp. 123</div> </b-list-group-item> </b-list-group> <b-btn class="btn-square col-md-12 mt-1" variant="warning" href="/#/orders/payment"><i class="fa fa-credit-card-alt"></i> Check out</b-btn> </div> <div v-show="items.length === 0"> <p>Your cart is empty!</p> </div> </div> </b-navbar-nav> </template> <script> export default { name: "cartDropdown", data() { return{ items: this.$session.get(SessionKeys.Cart) ? this.$session.get(SessionKeys.Cart) : [], showCart: false, verified: false } } } </script> ，但我仍然对实现它感到困惑