Vue 技巧合集

• 1. 响应式变量
  • 可接收参数的 computed 计算属性
  • 全局响应式变量

1. 响应式变量

可接收参数的 computed 计算属性

如何创建可接收参数的 computed？

可以使用闭包函数，将参数传递给 computed 函数。

const count = ref(0)

function myComputed(id: string) {
  return computed(() => {
    return `${id}: ${count.value}`
  })
}

全局响应式变量

如何创建全局响应式变量？

使用 @vueuse/core 的 createGlobalState 函数。

import { createGlobalState } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => {
    const count = ref(0)
    return { count }
  }
)