Real-time-monitoring-frontend/src/stores/modules/cameraBind.ts

import {defineStore} from "pinia";
import {computed, ref} from "vue";

export const useCameraBindStore=defineStore('cameraBind',()=>{
  // 存储已绑定的摄像头id及其绑定的组件信息
  const boundCameras=ref<Map<number,{
    val:number,
    type: string,
    title: string
  }>>(new Map());
  // 检查摄像头是否已被绑定
  const isCameraBound = (cameraId: number ) => {
    return boundCameras.value.has(cameraId);
  };
  // 获取摄像头的绑定信息
  const getCameraBindsInfo=(cameraId:number )=>{
    return boundCameras.value.get(cameraId);
  }
  // 绑定摄像头
  const bingCamera=(cameraId:number,obj:any)=>{
    if(isCameraBound(cameraId))
    {
      return false;
    }
    boundCameras.value.set(cameraId,{
      val:cameraId,
      type:obj.type,
      title:obj.title
    });
    return true;
  }
  // 解绑摄像头
  const unbindCamera=(cameraId:number)=>{
    boundCameras.value.delete(cameraId);
  }
  // 获取所有已经绑定的摄像头ID列表
  const getBoundCameraIds=computed(()=>{
    return Array.from(boundCameras.value.keys());
  })
  return {
    boundCameras,
    isCameraBound,
    getCameraBindsInfo,
    bingCamera,
    unbindCamera,
    getBoundCameraIds
  }
},{
  // 第三个参数：配置持久化
  persist: {
    key: 'camera-bind-store', // 存储在 localStorage 中的键名，可自定义
    storage: sessionStorage,    // 默认是 localStorage，如果想关闭页面失效可改为 sessionStorage
    serializer: {
      // 序列化：将 Mp 转换为 [[key, value], [key, value]] 的二维数组存入 JSON
      serialize: (state) => {
        return JSON.stringify({
          boundCameras: Array.from(state.boundCameras.entries())
        });
      },
      // 反序列化：将 JSON 中的二维数组解析并重新构建为 Map 对象
      deserialize: (value) => {
        const parsed = JSON.parse(value);
        return {
          boundCameras: new Map(parsed.boundCameras)
        };
      }
    }
  }
})