[Vuejs]-Add or extend Vuex action types using Typescript

0👍

Modifying original global behaviour for local purposes is universally a bad practice. A possible solution is to use custom helpers to extend it instead of modifying it. In this case it’s a simple wrapper that extends original store types:

type CustomActionHandler<S, R> = (this: Store<R>, injectee: ActionContext<S, R>, payload?: any) => ReturnObject | Promise<ReturnObject>;

interface CustomActionTree<S, R> {
  [key: string]: CustomActionHandler;
}

interface CustomModule<S, R> extends Module<S, R> {
  actions?: CustomActionTree<S, R>;
}

export interface CustomModuleTree<R> {
  [key: string]: CustomModule<any, R>;
}

interface CustomStoreOptions<S> extends StoreOptions<S> {
  actions?: CustomActionTree<S, S>;
  modules?: CustomModuleTree<S>;
}

function createCustomStore<S>(options: CustomStoreOptions<S>) {
  return new Store(options);
}

Leave a comment