fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.7 KiB
1.7 KiB
category, related
| category | related |
|---|---|
| State | createSharedComposable |
createGlobalState
Keep states in the global scope to be reusable across Vue instances.
Usage
Without Persistence (Store in Memory)
// store.ts
import { createGlobalState } from '@vueuse/core';
import { shallowRef } from 'vue';
export const useGlobalState = createGlobalState(() => {
const count = shallowRef(0);
return { count };
});
A bigger example:
// store.ts
import { createGlobalState } from '@vueuse/core';
import { computed, shallowRef } from 'vue';
export const useGlobalState = createGlobalState(() => {
// state
const count = shallowRef(0);
// getters
const doubleCount = computed(() => count.value * 2);
// actions
function increment() {
count.value++;
}
return { count, doubleCount, increment };
});
With Persistence
Store in localStorage with useStorage:
// store.ts
import { createGlobalState, useStorage } from '@vueuse/core';
export const useGlobalState = createGlobalState(() =>
useStorage('vueuse-local-storage', 'initialValue'),
);
// @filename: store.ts
// @include: store
// ---cut---
// component.ts
import { useGlobalState } from './store';
export default defineComponent({
setup() {
const state = useGlobalState();
return { state };
},
});
Type Declarations
export type CreateGlobalStateReturn<Fn extends AnyFn = AnyFn> = Fn;
/**
* Keep states in the global scope to be reusable across Vue instances.
*
* @see https://vueuse.org/createGlobalState
* @param stateFactory A factory function to create the state
*
* @__NO_SIDE_EFFECTS__
*/
export declare function createGlobalState<Fn extends AnyFn>(
stateFactory: Fn,
): CreateGlobalStateReturn<Fn>;