Skip to content

computedInject

Category
Export Size
142 B
Last Changed
2 months ago

Combine computed and inject

Demo

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

Usage

In Provider Component

ts
import type { 
InjectionKey
,
Ref
} from 'vue'
import {
provide
} from 'vue'
interface Item {
key
: number
value
: string
} export const
ArrayKey
:
InjectionKey
<
Ref
<Item[]>> =
Symbol
('symbol-key')
const
array
=
ref
([{
key
: 1,
value
: '1' }, {
key
: 2,
value
: '2' }, {
key
: 3,
value
: '3' }])
provide
(
ArrayKey
,
array
)
js
import { provide } from 'vue'
export const ArrayKey = Symbol('symbol-key')
const array = ref([
  { key: 1, value: '1' },
  { key: 2, value: '2' },
  { key: 3, value: '3' },
])
provide(ArrayKey, array)

In Receiver Component

ts
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

Show Type Declarations
ts
export type 
ComputedInjectGetter
<
T
,
K
> = (
source
:
T
| undefined,
oldValue
?:
K
,
) =>
K
export type
ComputedInjectGetterWithDefault
<
T
,
K
> = (
source
:
T
,
oldValue
?:
K
,
) =>
K
export 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

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
丶远方
SerKo
Zhong
IlyaL
wheat
MinatoHikari

Changelog

v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

FREE WEEKEND
48 Hours of Unlimited Official Vue.js Certification Training
Reserve Your Spot
23-24 August