1---
2category: State
3---
4 
5# createInjectionState
6 
7Create global state that can be injected into components.
8 
9## Usage
10 
11```ts twoslash include useCounterStore
12// useCounterStore.ts
13import { createInjectionState } from '@vueuse/core'
14import { computed, shallowRef } from 'vue'
15 
16const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
17  // state
18  const count = shallowRef(initialValue)
19 
20  // getters
21  const double = computed(() => count.value * 2)
22 
23  // actions
24  function increment() {
25    count.value++
26  }
27 
28  return { count, double, increment }
29})
30 
31export { useProvideCounterStore }
32 
33// If you want to hide `useCounterStore` and wrap it in default value logic or throw error logic, please don't export `useCounterStore`
34export { useCounterStore }
35 
36export function useCounterStoreWithDefaultValue() {
37  return useCounterStore() ?? {
38    count: shallowRef(0),
39    double: shallowRef(0),
40    increment: () => {},
41  }
42}
43 
44export function useCounterStoreOrThrow() {
45  const counterStore = useCounterStore()
46  if (counterStore == null)
47    throw new Error('Please call `useProvideCounterStore` on the appropriate parent component')
48  return counterStore
49}
50```
51 
52```vue
53<!-- RootComponent.vue -->
54<script setup lang="ts">
55// @filename: useCounterStore.ts
56// @include: useCounterStore
57// ---cut---
58import { useProvideCounterStore } from './useCounterStore'
59 
60useProvideCounterStore(0)
61</script>
62 
63<template>
64  <div>
65    <slot />
66  </div>
67</template>
68```
69 
70```vue
71<!-- CountComponent.vue -->
72<script setup lang="ts">
73// @filename: useCounterStore.ts
74// @include: useCounterStore
75// ---cut---
76import { useCounterStore } from './useCounterStore'
77 
78// use non-null assertion operator to ignore the case that store is not provided.
79const { count, double } = useCounterStore()!
80// if you want to allow component to working without providing store, you can use follow code instead:
81// const { count, double } = useCounterStore() ?? { count: shallowRef(0), double: shallowRef(0) }
82// also, you can use another hook to provide default value
83// const { count, double } = useCounterStoreWithDefaultValue()
84// or throw error
85// const { count, double } = useCounterStoreOrThrow()
86</script>
87 
88<template>
89  <ul>
90    <li>
91      count: {{ count }}
92    </li>
93    <li>
94      double: {{ double }}
95    </li>
96  </ul>
97</template>
98```
99 
100```vue
101<!-- ButtonComponent.vue -->
102<script setup lang="ts">
103// @filename: useCounterStore.ts
104// @include: useCounterStore
105// ---cut---
106import { useCounterStore } from './useCounterStore'
107 
108// use non-null assertion operator to ignore the case that store is not provided.
109const { increment } = useCounterStore()!
110</script>
111 
112<template>
113  <button @click="increment">
114    +
115  </button>
116</template>
117```
118 
119## Provide a custom InjectionKey
120 
121```ts
122// useCounterStore.ts
123import { createInjectionState } from '@vueuse/core'
124import { computed, shallowRef } from 'vue'
125 
126// custom injectionKey
127const CounterStoreKey = 'counter-store'
128 
129const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
130  // state
131  const count = shallowRef(initialValue)
132 
133  // getters
134  const double = computed(() => count.value * 2)
135 
136  // actions
137  function increment() {
138    count.value++
139  }
140 
141  return { count, double, increment }
142}, { injectionKey: CounterStoreKey })
143```
144 
145## Provide a custom default value
146 
147```ts
148// useCounterStore.ts
149import { createInjectionState } from '@vueuse/core'
150import { computed, shallowRef } from 'vue'
151 
152const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
153  // state
154  const count = shallowRef(initialValue)
155 
156  // getters
157  const double = computed(() => count.value * 2)
158 
159  // actions
160  function increment() {
161    count.value++
162  }
163 
164  return { count, double, increment }
165}, { defaultValue: 0 })
166```
167 
168## Type Declarations
169 
170```ts
171export type CreateInjectionStateReturn<
172  Arguments extends Array<any>,
173  Return,
174> = Readonly<
175  [
176    /**
177     * Call this function in a provider component to create and provide the state.
178     *
179     * @param args Arguments passed to the composable
180     * @returns The state returned by the composable
181     */
182    useProvidingState: (...args: Arguments) => Return,
183    /**
184     * Call this function in a consumer component to inject the state.
185     *
186     * @returns The injected state, or `undefined` if not provided and no default value was set.
187     */
188    useInjectedState: () => Return | undefined,
189  ]
190>
191export interface CreateInjectionStateOptions<Return> {
192  /**
193   * Custom injectionKey for InjectionState
194   */
195  injectionKey?: string | InjectionKey<Return>
196  /**
197   * Default value for the InjectionState
198   */
199  defaultValue?: Return
200}
201/**
202 * Create global state that can be injected into components.
203 *
204 * @see https://vueuse.org/createInjectionState
205 *
206 * @__NO_SIDE_EFFECTS__
207 */
208export declare function createInjectionState<
209  Arguments extends Array<any>,
210  Return,
211>(
212  composable: (...args: Arguments) => Return,
213  options?: CreateInjectionStateOptions<Return>,
214): CreateInjectionStateReturn<Arguments, Return>
215```
216