@vueuse/core

js
一般写在：auth.ts

作用：useStorage 是 VueUse 的组合式 API，封装了对 localStorage / sessionStorage 的操作。

const TokenKey = 'Admin-Token';

const tokenStorage = useStorage<null | string>(TokenKey, null);

export const getToken = () => tokenStorage.value;

export const setToken = (access_token: string) => (tokenStorage.value = access_token);

export const removeToken = () => (tokenStorage.value = null);

nprogress

js
一个轻量级的 页面加载进度条插件。

打开网页时，通常在页面顶部会有一条细细的蓝色进度条（类似 YouTube、知乎 的加载条），就是它做的。

它常和 路由切换、异步请求 结合使用，给用户一个“正在加载”的反馈。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


NProgress.configure({
  minimum: 0.1,       // 最小百分比
  easing: 'ease',     // 动画曲线
  speed: 500,         // 增长速度
  showSpinner: false, // 是否显示右侧小圈圈
  trickleSpeed: 200,  // 自动递增的间隔
})

configure 用来设置全局配置，showSpinner: false 表示 隐藏右上角的小转圈（默认是有的）。



NProgress.start()   // 开始进度条
NProgress.done()    // 结束进度条
NProgress.set(0.4)  // 设置进度到 40%
NProgress.inc()     // 自动前进一点

1.当页面路由发生切换时，显示进度条：

// main.js 或 router.js
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置
NProgress.configure({ showSpinner: false }) // 关闭右侧小圈圈

// 路由开始切换时
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

// 路由切换结束时
router.afterEach(() => {
  NProgress.done()
})


当发起网络请求时显示进度条：

import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 请求拦截器
axios.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// 响应拦截器
axios.interceptors.response.use(
  response => {
    NProgress.done()
    return response
  },
  error => {
    NProgress.done()
    return Promise.reject(error)
  }
)

import.meta.env内置

js
{
  BASE_URL: "/",          // 基础路径
  MODE: "development",   // 当前模式
  DEV: true,             // 是否开发环境
  PROD: false,           // 是否生产环境
}

1.watch中 flush: 'pre'（默认行为：DOM 更新前执行）

js

如果你不写 flush，Vue 默认就是 'pre'。
作用： 侦听器会在 Vue 重新渲染组件、更新 DOM 之前执行。
应用场景： 大多数常见的业务逻辑。当你只是想根据一个数据的变化，去修改另一个数据，或者发网络请求，而不需要用到页面上最新的 DOM 结构时。

例子：分页请求数据
当用户点击下一页，页码变了，你需要去后台请求新数据。这个时候你不需要管页面的 DOM 长什么样，只管发请求就行。
import { ref, watch } from 'vue'

const currentPage = ref(1)
const listData = ref([])

watch(
  currentPage,
  (newPage) => {
    // 默认 pre：在DOM更新前就执行
    // fetchListData 是个假想的请求方法
    fetchListData(newPage).then(res => {
      listData.value = res
    })
  }
  // 不需要写 { flush: 'pre' }，因为这是默认的
)

2. flush: 'post'（DOM 更新后执行）

js
作用： 侦听器会被推迟到组件渲染和 DOM 更新之后才执行。
应用场景： 当你的回调函数里，必须依赖更新后的 DOM 才能进行操作时。比如：获取元素的最新高度、操作图表库（如 ECharts）、自动滚动到底部等。

例子：聊天框自动滚动到底部
聊天列表中新增了一条消息，你想让页面自动滚动到最下面。如果你用默认的 'pre'，此时这条新消息还在内存里，还没渲染到屏幕上，你获取到的滚动条高度是旧的。必须用 'post' 等它渲染完再滚。


import { ref, watch } from 'vue'

const messages = ref(['你好', '在吗'])
const chatBoxRef = ref(null)

watch(
  messages,
  () => {
    // 此时新消息已经真实渲染到了页面上
    // 可以放心获取最新的 DOM 高度
    const box = chatBoxRef.value
    box.scrollTop = box.scrollHeight
  },
  { flush: 'post' } // 关键：等 DOM 更新完再执行
)
(注：Vue 3.2+ 提供了一个专门的 watchPostEffect 来替代 watchEffect(..., { flush: 'post' })，用法更简便。)

3. flush: 'sync'（强制同步执行）

js
作用： 取消 Vue 的异步批处理优化。只要数据发生改变，无论当前处于什么阶段，立刻、同步地执行回调。
应用场景： 非常少见。通常用于对屏幕刷新、UI 状态切换有极高实时性要求，不能容忍哪怕一毫秒闪烁的情况；或者用来拦截输入框的不合法输入。

例子：严苛的输入框过滤
假设你有一个输入框，绝对不允许用户输入空格。如果你用默认的 'pre'，用户输入空格时，Vue 内部可能会先让空格短暂地闪现在输入框里，然后再在下一个 Tick 把它删掉。用 'sync' 可以瞬间拦截，彻底消灭闪烁。

import { ref, watch } from 'vue'

const username = ref('')

watch(
  username,
  (newValue) => {
    if (newValue.includes(' ')) {
      // 只要输入空格，立刻同步把它替换掉
      // 页面上的输入框里连空格的影子都看不见
      username.value = newValue.replace(/\s+/g, '')
    }
  },
  { flush: 'sync' } // 立刻同步执行
)