vue3setup下一个页面采用两种样式表

问题描述：

• 完成页面之后，新的需求为采用两版样式，一版为普通版，在当前版本格局不变的情况下，点击按钮切换大字版，改变字体大小，内容不变，

实现

• 原有的样式分离出去成为外部css样式文件，新修改的样式为另一个css样式文件

• 定义一个变量，将之存储在本地存储中，

const isOrdinary = ref(1);
if (localStorage.getItem("ISORDINARY")) {
   console.log(localStorage.getItem("ISORDINARY"), "ISORDINARY");
   return;
} else {
   localStorage.setItem("ISORDINARY", isOrdinary.value);
   console.log(localStorage.getItem("ISORDINARY"), "ISORDINARY2");
   }

• 绑定切换按钮，点击按钮改变变量的值

 <span class="user-text">{{
            isOrdinary == 1 ? "切换大字版" : "切换普通版"
          }}</span>

// 改变样式版本 为1时为普通版，为2为大字版
const isOrdinary = ref(localStorage.getItem("ISORDINARY"));
const onChangeSimple = () => {
  if (isOrdinary.value == 1) {
    localStorage.setItem("ISORDINARY", 2);
    location.reload();
  } else {
    localStorage.setItem("ISORDINARY", 1);
    location.reload();
  }
};

• 根据变量的值选择显示的样式文件

<template>
   <link
        :href="`${isOrdinary == 1 ? '/src/css/home/home.scss' : '/src/css/home/home_simple.scss'}`"
        rel="stylesheet"
        type="text/css"
        id="css"
    />
</template>

<script setup>
// css样式版本控制变量
const isOrdinary = ref(localStorage.getItem('ISORDINARY'));
</script>