1---
2category: Component
3---
4 
5# computedInject
6 
7Combine `computed` and `inject`. Useful for creating a computed property based on an injected value.
8 
9## Usage
10 
11In Provider Component
12 
13```ts twoslash include main
14import type { InjectionKey, Ref } from 'vue'
15import { provide, ref } from 'vue'
16 
17interface Item {
18  key: number
19  value: string
20}
21 
22export const ArrayKey: InjectionKey<Ref<Item[]>> = Symbol('symbol-key')
23 
24const array = ref([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])
25 
26provide(ArrayKey, array)
27```
28 
29In Receiver Component
30 
31```ts
32// @filename: provider.ts
33// @include: main
34// ---cut---
35import { computedInject } from '@vueuse/core'
36 
37import { ArrayKey } from './provider'
38 
39const computedArray = computedInject(ArrayKey, (source) => {
40  const arr = [...source.value]
41  arr.unshift({ key: 0, value: 'all' })
42  return arr
43})
44```
45 
46### Default Value
47 
48You can provide a default value that will be used if the injection key is not provided by a parent component.
49 
50```ts
51import { computedInject } from '@vueuse/core'
52 
53const computedArray = computedInject(
54  ArrayKey,
55  (source) => {
56    return source.value.map(item => item.value)
57  },
58  ref([]), // default source value
59)
60```
61 
62### Factory Default
63 
64Pass `true` as the fourth argument to treat the default value as a factory function.
65 
66```ts
67import { computedInject } from '@vueuse/core'
68 
69const computedArray = computedInject(
70  ArrayKey,
71  (source) => {
72    return source.value.map(item => item.value)
73  },
74  () => ref([]), // factory function for default
75  true, // treat default as factory
76)
77```
78 
79### Writable Computed
80 
81You can also create a writable computed property by passing an object with `get` and `set` functions.
82 
83```ts
84import { computedInject } from '@vueuse/core'
85 
86const computedArray = computedInject(ArrayKey, {
87  get(source) {
88    return source.value.map(item => item.value)
89  },
90  set(value) {
91    // handle setting the value
92    console.log('Setting value:', value)
93  },
94})
95```
96 
97## Type Declarations
98 
99```ts
100export type ComputedInjectGetter<T, K> = (
101  source: T | undefined,
102  oldValue?: K,
103) => K
104export type ComputedInjectGetterWithDefault<T, K> = (
105  source: T,
106  oldValue?: K,
107) => K
108export type ComputedInjectSetter<T> = (v: T) => void
109export interface WritableComputedInjectOptions<T, K> {
110  get: ComputedInjectGetter<T, K>
111  set: ComputedInjectSetter<K>
112}
113export interface WritableComputedInjectOptionsWithDefault<T, K> {
114  get: ComputedInjectGetterWithDefault<T, K>
115  set: ComputedInjectSetter<K>
116}
117export declare function computedInject<T, K = any>(
118  key: InjectionKey<T> | string,
119  getter: ComputedInjectGetter<T, K>,
120): ComputedRef<K | undefined>
121export declare function computedInject<T, K = any>(
122  key: InjectionKey<T> | string,
123  options: WritableComputedInjectOptions<T, K>,
124): ComputedRef<K | undefined>
125export declare function computedInject<T, K = any>(
126  key: InjectionKey<T> | string,
127  getter: ComputedInjectGetterWithDefault<T, K>,
128  defaultSource: T,
129  treatDefaultAsFactory?: false,
130): ComputedRef<K>
131export declare function computedInject<T, K = any>(
132  key: InjectionKey<T> | string,
133  options: WritableComputedInjectOptionsWithDefault<T, K>,
134  defaultSource: T | (() => T),
135  treatDefaultAsFactory: true,
136): ComputedRef<K>
137```
138