Pinia与Vue组合式API差异：为何可省略computed的.value？能否复现？

一、Pinia能省略.value的原因 #

Pinia在创建store的时候，会给返回的对象套一层响应式代理（Proxy）。当你访问store上的computed或ref属性时，这个代理会自动帮你读取.value并返回结果，不用你手动写。这么做就是为了让store的使用感更像普通对象，减少重复写.value的麻烦。

二、不借助Pinia复现该行为 #

当然可以，下面给两种实用的实现方式：

方案1：用Proxy手动拦截 #

import { computed, isRef, isComputed } from 'vue'

export default () => {
  const test = computed(() => '测试内容')
  
  // 创建代理，自动处理ref/computed的.value
  return new Proxy({ test }, {
    get(target, key) {
      const val = target[key]
      // 自动解包ref和computed
      if (isRef(val) || isComputed(val)) {
        return val.value
      }
      return val
    },
    set(target, key, newVal) {
      const val = target[key]
      // 如果是ref，直接修改其.value
      if (isRef(val)) {
        val.value = newVal
        return true
      }
      target[key] = newVal
      return true
    }
  })
}

用的时候直接store.test就能访问值，修改也可以直接store.test = '新内容'。

方案2：结合reactive自动解包 #

Vue的reactive本身就会自动解包嵌套的ref和computed，所以可以把响应式值放到reactive对象里返回：

import { computed, reactive } from 'vue'

export default () => {
  const store = reactive({
    test: computed(() => '测试内容')
  })
  return store
}

这种方式更简单，返回的store直接访问store.test就能拿到computed的值，不用写.value。

注意事项 #

• 手动实现的话，建议用Vue官方提供的isRef、isComputed工具函数来判断类型，比自己判断value属性更准确。
• 如果你只是需要基础的状态管理，不需要Pinia的调试、持久化等额外功能，手动实现的方案完全够用。

内容的提问来源于stack exchange，提问作者Alex