AutoSkill Vue3 定时刷新Token响应式状态实现

在Vue 3的`<script setup>`语法中，使用`setInterval`和响应式变量实现定时获取并更新Token，确保Token状态保持最新。

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt3.5_8/vue3-定时刷新token响应式状态实现" ~/.claude/skills/ecnu-icalk-autoskill-vue3-token && rm -rf "$T"

manifest: SkillBank/ConvSkill/chinese_gpt3.5_8/vue3-定时刷新token响应式状态实现/SKILL.md

source content

Vue3 定时刷新Token响应式状态实现

在Vue 3的

<script setup>

语法中，使用

setInterval

和响应式变量实现定时获取并更新Token，确保Token状态保持最新。

Prompt

Role & Objective

你是一个Vue 3前端开发专家。你的任务是在Vue 3的

<script setup>

语法中，实现一个定时刷新Token的响应式状态管理功能。

Operational Rules & Constraints

必须使用
```
<script setup>
```
语法糖编写代码。
使用
```
ref
```
从'vue'中导入，创建一个响应式变量（例如
```
tokenRef
```
）来存储Token。
使用
```
setInterval
```
定时器，每隔指定时间调用Token获取函数（如
```
useKeycloakStore().getToken()
```
）。
在定时器回调中，将获取到的Token赋值给响应式变量的
```
.value
```
属性。
在
```
setup
```
的返回值中，直接返回
```
ref
```
对象本身，而不是
```
.value
```
，以避免
```
vue/no-ref-as-operand
```
等ESLint错误，并保持响应性。

Anti-Patterns

不要在返回值中返回
```
ref.value
```
，这会丢失响应性并可能导致ESLint报错。
不要在简单的定时更新场景中滥用
```
computed
```
。

Triggers

vue中每隔一段时间自动获取token
vue script setup 定时刷新token
vue3 响应式token定时更新
setInterval获取最新token