使用计算属性来引用 store 的状态是一种最佳实践

在 Pinia 中使用计算属性的原因详解

🔍 核心原因：响应式数据绑定

1. 响应式数据同步

import { onMounted, computed, ref } from 'vue'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

// ❌ 方式一：直接赋值（不推荐）
const sharedObjectDirect = ref(null)

onMounted(() => {
  // 问题：只在 mounted 时获取一次值
  // 如果其他地方修改了 store 中的数据，这里不会自动更新
  sharedObjectDirect.value = userStore.sharedObject
})

// ✅ 方式二：使用计算属性（推荐）
const sharedObject = computed(() => userStore.sharedObject)
// 优势：当 store 中的 sharedObject 变化时，这里会自动更新

2. 实际场景演示

Store 定义：

// stores/userStore.js
export const useUserStore = defineStore('user', {
  state: () => ({
    sharedObject: null
  }),
  actions: {
    updateSharedObject(newData) {
      this.sharedObject = newData
    }
  }
})

组件中使用：

<template>
  <div>
    <!-- 使用计算属性，数据变化会自动更新视图 -->
    <h2>{{ sharedObject.name }}</h2>
    <p>{{ sharedObject.details }}</p>
    
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

// ✅ 计算属性 - 自动响应变化
const sharedObject = computed(() => userStore.sharedObject)

// ✅ 当其他组件或操作修改 store 时，这里会自动更新
const updateData = () => {
  userStore.updateSharedObject({
    name: '更新后的名称',
    details: '新的详情信息'
  })
  // sharedObject 计算属性会自动获取最新值
}
</script>

📊 不同方式的对比

方式	响应式	自动更新	代码简洁性	推荐度
计算属性	✅	✅	✅	⭐⭐⭐⭐⭐
直接引用	❌	❌	✅	⭐⭐
watch 监听	✅	✅	❌	⭐⭐⭐

3. 替代方案对比

// 方案一：计算属性（最优）
const sharedObject = computed(() => userStore.sharedObject)

// 方案二：直接引用 + 手动更新（不推荐）
const sharedObject = ref(null)
onMounted(() => {
  sharedObject.value = userStore.sharedObject
})
// 问题：需要手动监听 store 变化

// 方案三：watch 监听（可用但冗余）
const sharedObject = ref(null)
watch(
  () => userStore.sharedObject,
  (newVal) => {
    sharedObject.value = newVal
  },
  { immediate: true }
)

🎯 计算属性的优势总结

1. 自动响应式更新

// 当 store 中的数据变化时，计算属性自动重新计算
const sharedObject = computed(() => userStore.sharedObject)

// 等同于：
const sharedObject = ref(userStore.sharedObject)
watchEffect(() => {
  sharedObject.value = userStore.sharedObject
})

2. 性能优化

// 计算属性有缓存，只有依赖变化时才重新计算
const userData = computed(() => {
  // 这个计算只在 userStore.userData 实际变化时执行
  return userStore.userData ? processUserData(userStore.userData) : null
})

3. 支持复杂计算逻辑

// 可以在计算属性中进行数据处理
const processedData = computed(() => {
  if (!userStore.sharedObject) return null
  
  return {
    ...userStore.sharedObject,
    fullName: `${userStore.sharedObject.firstName} ${userStore.sharedObject.lastName}`,
    formattedDate: new Date(userStore.sharedObject.createdAt).toLocaleDateString()
  }
})

🚀 实际应用示例

完整的路由参数传递场景：

发送参数：

// ComponentA.vue - 发送参数
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

const router = useRouter()
const userStore = useUserStore()

const sendUserData = () => {
  const userData = {
    id: 1,
    profile: {
      name: '张三',
      avatar: 'avatar.jpg',
      settings: { theme: 'dark', language: 'zh-CN' }
    },
    permissions: ['read', 'write']
  }
  
  // 存储到 Pinia
  userStore.setUserData(userData)
  
  // 跳转
  router.push('/user-detail')
}

接收参数：

// ComponentB.vue - 接收参数
<template>
  <div v-if="userData">
    <h1>{{ userData.profile.name }}</h1>
    <p>主题: {{ userData.profile.settings.theme }}</p>
    <p>权限: {{ userData.permissions.join(', ') }}</p>
  </div>
  <div v-else>
    加载中...
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

// ✅ 使用计算属性确保响应式
const userData = computed(() => userStore.userData)

// ✅ 派生计算属性
const userPermissions = computed(() => {
  return userData.value?.permissions || []
})

const hasWritePermission = computed(() => {
  return userPermissions.value.includes('write')
})
</script>

💡 重要提醒

1. 计算属性是只读的，要修改数据需要通过 store 的 actions
2. 对于嵌套对象，Pinia 会自动进行响应式处理
3. 在模板中直接使用计算属性，不需要 .value

// 正确用法
const userData = computed(() => userStore.userData)

// 在模板中：
// <div>{{ userData.name }}</div>

// 修改数据需要通过 action
const updateUser = () => {
  // ❌ 错误：直接修改计算属性
  // userData.value.name = '新名字'
  
  // ✅ 正确：通过 store action
  userStore.updateUser({ name: '新名字' })
}

💎 总结

在 Pinia 中使用计算属性接收参数的主要原因：

• 🔄 自动响应式更新 - 当 store 数据变化时自动同步
• 🎯 代码简洁性 - 一行代码替代复杂的 watch 逻辑
• ⚡ 性能优化 - 内置缓存机制，避免不必要的重计算
• 🔧 灵活性 - 支持复杂的数据处理和派生状态

这种模式确保了组件与 store 数据的完全同步，是 Vue 3 组合式 API 的最佳实践。