1---
2category: State
3related: createSharedComposable
4---
5 
6# createGlobalState
7 
8Keep states in the global scope to be reusable across Vue instances.
9 
10## Usage
11 
12### Without Persistence (Store in Memory)
13 
14```ts
15// store.ts
16import { createGlobalState } from '@vueuse/core'
17import { shallowRef } from 'vue'
18 
19export const useGlobalState = createGlobalState(
20  () => {
21    const count = shallowRef(0)
22    return { count }
23  }
24)
25```
26 
27A bigger example:
28 
29```ts
30// store.ts
31import { createGlobalState } from '@vueuse/core'
32import { computed, shallowRef } from 'vue'
33 
34export const useGlobalState = createGlobalState(
35  () => {
36    // state
37    const count = shallowRef(0)
38 
39    // getters
40    const doubleCount = computed(() => count.value * 2)
41 
42    // actions
43    function increment() {
44      count.value++
45    }
46 
47    return { count, doubleCount, increment }
48  }
49)
50```
51 
52### With Persistence
53 
54Store in `localStorage` with `useStorage`:
55 
56```ts twoslash include store
57// store.ts
58import { createGlobalState, useStorage } from '@vueuse/core'
59 
60export const useGlobalState = createGlobalState(
61  () => useStorage('vueuse-local-storage', 'initialValue'),
62)
63```
64 
65```ts
66// @filename: store.ts
67// @include: store
68// ---cut---
69// component.ts
70import { useGlobalState } from './store'
71 
72export default defineComponent({
73  setup() {
74    const state = useGlobalState()
75    return { state }
76  },
77})
78```
79 
80## Type Declarations
81 
82```ts
83export type CreateGlobalStateReturn<Fn extends AnyFn = AnyFn> = Fn
84/**
85 * Keep states in the global scope to be reusable across Vue instances.
86 *
87 * @see https://vueuse.org/createGlobalState
88 * @param stateFactory A factory function to create the state
89 *
90 * @__NO_SIDE_EFFECTS__
91 */
92export declare function createGlobalState<Fn extends AnyFn>(
93  stateFactory: Fn,
94): CreateGlobalStateReturn<Fn>
95```
96