Skip to content

Instantly share code, notes, and snippets.

@lmiller1990

lmiller1990/store.ts

Last active May 12, 2021
Embed
What would you like to do?
typesafe-store.ts
import { reactive } from 'vue';
type Method = (...args: any[]) => any
type StoreWithState<S extends StateTree> = {
state: S
}
type StoreWithActions<A> = {
[k in keyof A]: A[k] extends (...args: infer P) => infer R
? (...args: P) => R
: never
}
type Store<
S extends StateTree,
A extends Record<string, Method>
> = StoreWithState<S> & StoreWithActions<A>;
export type StateTree = Record<string | number | symbol, any>;
function defineStore<
S extends StateTree,
A extends Record<string, Method>
>(options: {
state: S,
actions: A & ThisType<A & StoreWithState<S>>
}) {
const initialStore = {
state: options.state
}
return function useStore(): Store<S, A> {
const wrappedActions: StoreWithActions<A> = {} as StoreWithActions<A>
const actions = (options.actions || {}) as A
for (const actionName in actions) {
wrappedActions[actionName] = function(...args: any[]) {
return actions[actionName].apply(store, args)
} as StoreWithActions<A>[typeof actionName]
}
const store: Store<S, A> = reactive({
...initialStore,
...wrappedActions
}) as Store<S, A>
return store
}
}
export const useMainStore = defineStore({
state: {
counter: 0,
},
actions: {
inc(val: number = 1) {
this.state.counter += val
},
},
});
const main = useMainStore()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment