必须用 storeToRefs 解构 Pinia store，因其将响应式字段转为保持响应性的 ref/computed；直接解构会丢失响应性，导致视图不更新。
Vue 全局状态按需解构，核心在于用 storeToRefs 安全提取 Pinia store 中的响应式字段，避免丢失响应性，同时只取需要的属性，不引入冗余引用。
为什么不能直接解构 store 对象？
Pinia store 本身是响应式代理对象，但它的属性（如 state 中的 token、user）在直接解构时会脱离响应式上下文——变成普通 JS 变量，后续修改不会触发视图更新。
错误示例：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const userStore = useUserStore()
const { token, isAuthenticated } = userStore // ❌ 失去响应性
正确做法：用 storeToRefs 提取响应式引用
storeToRefs 专为这个场景设计：它把 store 中的响应式 ref 和 computed 属性，转换成保持响应性的独立 ref 或 computed，支持结构赋值且不破环响应链。
立即学习“前端免费学习笔记（深入）”；
- 仅对 store 中通过
ref、computed声明的属性生效（即 getter 和响应式 state 字段） - 返回的对象可安全解构，每个字段仍是响应式
- 不推荐对 actions 解构，它们本就不依赖响应性，直接从 store 调用更清晰
实际使用步骤
以用户登录状态为例：
- 定义 store（
src/stores/user.ts）：
export const useUserStore = defineStore('user', () => {
const token = ref<string>('')
const profile = ref<User | null>(null)
const isAuthenticated = computed(() => !!token.value)
function login(t: string) {
token.value = t
localStorage.setItem('token', t)
}
return { token, profile, isAuthenticated, login }
})
- 组件中按需解构：
<script setup>
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { token, isAuthenticated } = storeToRefs(userStore) // ✅ 响应式解构
const { login } = userStore // ✅ actions 直接解构无影响
function handleLogin() {
login('abc123')
}
</script>
进阶注意点
- 如果 store 中有嵌套对象（如
profile.name），不要解构到深层字段：const { profile } = storeToRefs(userStore)即可，模板中仍用{{ profile.name }} - 不需要响应性的字段（比如常量配置、纯函数），可直接从 store 解构，无需
storeToRefs - 搭配 TypeScript 时，
storeToRefs返回类型自动推导，无需额外标注
