利用vue3提供的hooks实现响应式的全局状态共享

1.下面时useCart.ts这个hooks中的代码，其实挺简单的，用原生js也可以实现全局状态共享。但是使用原生的var或let，const声明的购物车变量由于数据不是响应式的，导致购物车数据发生改变页面不会响应式的变化。这里与原生的唯一的区别就是，只不过使用了vue提供的reactive方法将购物车变量转变为响应式的，当购物车发生变化时，页面也会随之响应式的发生改变

具体实现参考下面代码

useCart.ts中的代码

import { reactive } from "vue";

interface goodsType{
    id:number,
    name:string,
    prodAddr:string,
    price:string
}
type carListType=Array<goodsType>

var carList:carListType=reactive([]) //购物车列表，注意一定要是响应式。不然购物车内数据发生改变无法实现页面响应式变化




export default function useCart(){
          

    //添加购物车
    function addCartList(goods:goodsType){
        carList.push({...goods})
    }

    //获取购物车
    function getCartList(){
        return carList
    }
    
    //初始化购物车数据，这个在项目初始化时从缓存中获取之前存取在里面的数据
    function initCartList(){
        var  oldCarList= JSON.parse(window.sessionStorage.getItem('carList')??JSON.stringify([]))
        
        if(oldCarList&&oldCarList.length>0){
            
            carList.push(...(oldCarList as Array<goodsType>))
        }
    }
    
    //保存购物车数据,在项目销毁，也就是监听项目窗口关闭之前将购物车中的数据存储在缓存中。
    function saveCartList(){

        window.sessionStorage.setItem('carList',JSON.stringify(carList))
    }

    return {
        addCartList,
        getCartList,
        initCartList,
        saveCartList
   }
    
}

app.vue中的代码

由于项目初始化时，会首先加载app.vue，所以我们在app.vue页面的onBeforeMount声明周期，作为整个项目初始化的声明周期(当然你也可以在main.ts中初始化购物车，因为项目一旦加载肯定会加载main.ts)，然后在此时可以初始化购物车，也就是从缓存中拿到之前存储在其中的购物车数据。

<template>
  <div id="nav">
   apppage
  </div>
  <router-view/>
</template>


<script lang="ts" setup>
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from "@vue/runtime-core";
import useCart from './hooks/useCart'
var cart =useCart()

//当app页面进入onBeforeMount生命周期时，从本地缓存中拿到之前存储在里面的商品
onBeforeMount(()=>{
cart.initCartList()
})


//监听窗口关闭，也就是项目关闭时，将购物车中的数据保存在本地缓存中
window.addEventListener('beforeunload', ()=>{
      cart.saveCartList()
   })

</script>


<style >
  

</style>

//以上就是实现了购物车响应式的全局状态共享功能，需要在其他页面使用则直接引入useCart方法