Vue3/Pinia组件中基于Store计算属性的优化实现问询

你可以通过以下几种方式简化代码，避免重复写.value.value：

1. 在计算属性内部提前提取值 #

直接在computed回调里把sessionUser.value赋值给一个变量，后续访问属性时就不用重复调用.value：

import { computed} from 'vue'
import { storeToRefs } from 'pinia'
import {useMyStore} from './../stores/mystore'

export default {
  setup() {
    const { sessionUser } = storeToRefs(useMyStore())
    const fullName = computed(() => {
      const user = sessionUser.value
      return `${user.firstName} ${user.lastName}`
    })
    return {
      fullName
    }
  }
}

2. 使用unref工具函数简化解包 #

Vue提供的unref函数可以自动解包ref值（如果是ref则返回.value，否则直接返回原值），用它替代手动写.value，代码更简洁：

import { computed, unref } from 'vue'
import { storeToRefs } from 'pinia'
import {useMyStore} from './../stores/mystore'

export default {
  setup() {
    const { sessionUser } = storeToRefs(useMyStore())
    const fullName = computed(() => {
      const user = unref(sessionUser)
      return `${user.firstName} ${user.lastName}`
    })
    return {
      fullName
    }
  }
}

3. 增加可选链增强健壮性（可选） #

如果sessionUser可能为null或undefined，可以结合可选链操作符?.和空值合并操作符??，避免出现报错：

import { computed, unref } from 'vue'
import { storeToRefs } from 'pinia'
import {useMyStore} from './../stores/mystore'

export default {
  setup() {
    const { sessionUser } = storeToRefs(useMyStore())
    const fullName = computed(() => {
      const user = unref(sessionUser)
      return `${user?.firstName ?? ''} ${user?.lastName ?? ''}`.trim()
    })
    return {
      fullName
    }
  }
}

这些方法都不需要把计算属性移到Store内部，同时能有效简化组件内的代码写法。

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