vue3使用@vueuse/core useFullscreen 如何保存是否全屏的状态

背景：

进入系统后，点击右上角的全屏后，点击退出系统，然后再进入仍然显示全屏按钮，没有退出全屏的按钮，需要点击两次才可退出全屏

解决方法：

本次解决是通过store,使用localStorage一样可以实现

<template>
  <div
    :title="isFullscreen ? $t('message.system.fullScreenBack') : $t('message.system.fullScreen')"
  >
    <i
      class="sfont"
      :class="isFullscreen ? 'system-quanping' : 'system-quanping1'"
      @click="toggle"
    ></i>
  </div>
</template>

<script setup>
import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
//引入相关依赖
import { useFullscreen } from '@vueuse/core';
import { useStore } from '@zqxx/store';
const { isFullscreen, toggle,} = useFullscreen();

// 使用 store 保存状态
const savedFullscreenStatus = store.app.sysIsFullScreen;
const isFullscreenWithPersistence = ref(Boolean(JSON.parse(savedFullscreenStatus)));

// 切换状态
async function toggleFullscreen() {
  isFullscreenWithPersistence.value = !isFullscreenWithPersistence.value;
  await new Promise(resolve => setTimeout(resolve, 250)); // 等待50毫秒，确保DOM更新
  toggle();
}

// 监听全屏状态变化，保存到 localStorage
watch(
  isFullscreen,
  (newValue) => {
    store.app.sysIsFullScreenChange(JSON.stringify(newValue));
  },
  { immediate: true }
);

// 组件挂载时，如果需要进入全屏，则进入全屏
onMounted(() => {
  if (isFullscreenWithPersistence.value) {
    toggleFullscreen();
  }
});

// 组件卸载时，保存当前的全屏状态
onUnmounted(() => {
  store.app.sysIsFullScreenChange(JSON.stringify(isFullscreen.value));
});
</script>