0
# State Management
1

2
State management utilities for sharing reactive state across components and composables in Vue applications.
3

4
## Capabilities
5

6
### createGlobalState
7

8
Creates a global state that can be shared across multiple components without using provide/inject.
9

10
```typescript { .api }
11
/**
12
 * Creates a global state that can be shared across components
13
 * @param stateFactory - Factory function that creates the initial state
14
 * @returns Function that returns the shared state instance
15
 */
16
function createGlobalState<T>(stateFactory: () => T): () => T;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { createGlobalState, ref } from "@vueuse/shared";
23

24
// Create global counter state
25
const useGlobalCounter = createGlobalState(() => ref(0));
26

27
// Use in any component
28
export default {
29
  setup() {
30
    const counter = useGlobalCounter();
31
    
32
    const increment = () => counter.value++;
33
    
34
    return { counter, increment };
35
  }
36
};
37
```
38

39
### createInjectionState
40

41
Creates an injection state pair for provide/inject pattern with type safety.
42

43
```typescript { .api }
44
/**
45
 * Creates injectable state for provide/inject pattern
46
 * @param composable - Composable function to make injectable
47
 * @returns Tuple of [providing function, injecting function]
48
 */
49
function createInjectionState<Args extends Array<any>, Return>(
50
  composable: (...args: Args) => Return
51
): [
52
  useProvidingState: (...args: Args) => Return,
53
  useInjectedState: () => Return | undefined
54
];
55
```
56

57
**Usage Example:**
58

59
```typescript
60
import { createInjectionState, ref } from "@vueuse/shared";
61

62
// Create injection state
63
const [useProvidingCounter, useInjectedCounter] = createInjectionState(
64
  (initialValue: number) => {
65
    const count = ref(initialValue);
66
    const increment = () => count.value++;
67
    return { count, increment };
68
  }
69
);
70

71
// In parent component
72
export const ParentComponent = {
73
  setup() {
74
    const { count, increment } = useProvidingCounter(0);
75
    return { count, increment };
76
  }
77
};
78

79
// In child component
80
export const ChildComponent = {
81
  setup() {
82
    const counterState = useInjectedCounter();
83
    // counterState will be undefined if not provided
84
    return { counterState };
85
  }
86
};
87
```
88

89
### createSharedComposable
90

91
Creates a shared version of a composable that returns the same instance across all calls.
92

93
```typescript { .api }
94
/**
95
 * Creates a shared version of a composable
96
 * @param composable - Composable function to make shared
97
 * @returns Shared version that returns same instance
98
 */
99
function createSharedComposable<Fn extends(...args: any[]) => any>(
100
  composable: Fn
101
): Fn;
102
```
103

104
**Usage Example:**
105

106
```typescript
107
import { createSharedComposable, ref } from "@vueuse/shared";
108

109
// Original composable
110
const useCounter = () => {
111
  const count = ref(0);
112
  const increment = () => count.value++;
113
  return { count, increment };
114
};
115

116
// Shared version
117
const useSharedCounter = createSharedComposable(useCounter);
118

119
// All calls return the same instance
120
const counter1 = useSharedCounter(); // count: 0
121
const counter2 = useSharedCounter(); // Same instance as counter1
122
```
123

124
### createEventHook
125

126
Utility for creating event hooks with type-safe event handling.
127

128
```typescript { .api }
129
/**
130
 * Creates an event hook system
131
 * @returns EventHook instance with on/off/trigger methods
132
 */
133
function createEventHook<T = any>(): EventHook<T>;
134

135
interface EventHook<T> {
136
  /** Register event listener */
137
  on: EventHookOn<T>;
138
  /** Remove event listener */
139
  off: EventHookOff<T>;
140
  /** Trigger event with data */
141
  trigger: EventHookTrigger<T>;
142
}
143

144
interface EventHookOn<T> {
145
  (fn: (param: T) => void): { off: () => void };
146
}
147

148
interface EventHookOff<T> {
149
  (fn: (param: T) => void): void;
150
}
151

152
interface EventHookTrigger<T> {
153
  (param: T): void;
154
}
155
```
156

157
**Usage Example:**
158

159
```typescript
160
import { createEventHook } from "@vueuse/shared";
161

162
const useMyComposable = () => {
163
  const myHook = createEventHook<string>();
164
  
165
  const triggerEvent = (message: string) => {
166
    myHook.trigger(message);
167
  };
168
  
169
  return {
170
    onMessage: myHook.on,
171
    triggerEvent
172
  };
173
};
174

175
// Usage
176
const { onMessage, triggerEvent } = useMyComposable();
177

178
const { off } = onMessage((message) => {
179
  console.log('Received:', message);
180
});
181

182
triggerEvent('Hello World!');
183
off(); // Remove listener
184
```