我要用vue3 script setup 写

在Vue 3 中，使用 `setup` 函数编写组件变得更加简洁和易读。`setup` 函数允许你在组件内部声明和初始化数据、响应式计算属性、方法和事件处理器，而不必显式地通过 `data()` 和 `methods()` 定义它们。下面是一个使用 `script setup` 的基本组件示例，展示如何处理Token刷新：

首先，在`src/components/Login.vue` 文件中：

<!-- login.vue -->
<template>
  <div>
    <button @click="handleRefresh">刷新令牌</button>
    <p v-if="isLoading">正在刷新...</p>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import { useStore } from '@/store';

// 获取store并存储引用
const store = useStore();

// 初始化状态
let refreshTokenRef = ref(null);

// 表示是否正在刷新的标志
let isLoading = ref(false);

// 触发刷新
async function handleRefresh() {
  if (!refreshTokenRef.value) return; // 没有刷新令牌则跳过

  isLoading.value = true;

  try {
    const response = await store.dispatch('refreshToken', refreshTokenRef.value);
    // 更新状态后清除加载状态
    isLoading.value = false;
    // 更新访问令牌等状态
    store.commit('UPDATE_ACCESS_TOKEN', response.access_token);
  } catch (error) {
    // 处理刷新失败
    console.error('刷新令牌出错:', error);
    isLoading.value = false;
  }
}

// 当刷新令牌发生变化时，自动尝试刷新
watchEffect(() => {
  if (store.state.refreshToken && store.getters.isTokenExpired) {
    handleRefresh();
  }
});

onMounted(() => {
  // 在挂载后检查是否有刷新令牌
  handleRefresh();
});
</script>

在这个例子中：
- `useStore` 是一个自定义的库函数，它导入了Vuex store，让你在组件中轻松使用。
- `ref` 创建了一个可变的响应式变量。
- `watchEffect` 监听store中的刷新令牌状态变化，如果令牌存在且已过期，则触发刷新操作。
- `onMounted` 负责在组件挂载后立即检查刷新令牌状态。