VueUse

Array: [ { "key": 1, "value": "1" }, { "key": 2, "value": "2" }, { "key": 3, "value": "3" } ]

ComputedArr: [ { "key": 0, "value": "all" }, { "key": 1, "value": "1" }, { "key": 2, "value": "2" }, { "key": 3, "value": "3" } ]

computedInject

Combine computed and inject

Usage

In Provider Component

import { InjectionKey, provide, Ref, ref } from 'vue-demi';

export const ArrayKey: InjectionKey<Ref<{ key: number, value: string }[]>> = Symbol()

const array = ref([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])

provide(ArrayKey, array)

In Receiver Component

import { computedInject } from '@vueuse/core'

import { ArrayKey } from "./provider"

const computedArray = computedInject(ArrayKey, (source) => {
  const arr = [...source.value]
  arr.unshift({ key: 0, value: 'all' })
  return arr
})

Type Declarations 

export declare type ComputedInjectGetter<T, K> = (
  source: T | undefined,
  ctx?: any
) => K
export declare type ComputedInjectGetterWithDefault<T, K> = (
  source: T,
  ctx?: any
) => K
export declare type ComputedInjectSetter<T> = (v: T) => void
export interface WritableComputedInjectOptions<T, K> {
  get: ComputedInjectGetter<T, K>
  set: ComputedInjectSetter<K>
}
export interface WritableComputedInjectOptionsWithDefault<T, K> {
  get: ComputedInjectGetterWithDefault<T, K>
  set: ComputedInjectSetter<K>
}
export declare function computedInject<T, K = any>(
  key: InjectionKey<T> | string,
  getter: ComputedInjectGetter<T, K>
): ComputedRef<K | undefined>
export declare function computedInject<T, K = any>(
  key: InjectionKey<T> | string,
  options: WritableComputedInjectOptions<T, K>
): ComputedRef<K | undefined>
export declare function computedInject<T, K = any>(
  key: InjectionKey<T> | string,
  getter: ComputedInjectGetterWithDefault<T, K>,
  defaultSource: T,
  treatDefaultAsFactory?: false
): ComputedRef<K>
export declare function computedInject<T, K = any>(
  key: InjectionKey<T> | string,
  options: WritableComputedInjectOptionsWithDefault<T, K>,
  defaultSource: T | (() => T),
  treatDefaultAsFactory: true
): ComputedRef<K>

Source

Source • Demo • Docs