Usage with nuxt.js

[mrkswrnr]

First of all: Thank you for this library! I also tried to make vuex typesafe and must admit that I really like your approach - maybe even better than mine!

We are using vuex a lot in combination with nuxt.ts and I wanted to share some thoughts about using your library with nuxt.js:

1. Using the interfaces with vuex modules mode:

import R from "~/store";

export default interface S {
  // module declaration
}

// Variant a:
type M = Module<S, R>;

export const state: M["state"] = () => ({});
export const mutations: M["mutations"] = {};
export const getters: M["getters"] = {};
export const actions: M["actions"] & ThisType<Store<M>> = {};

// Variant b:
export const state: Resolvable<StateInputFor<S>> = () => ({});
export const mutations: MutationTree<S> = {};
export const getters: GetterTree<S, R> = {};
export const actions: ActionTree<S, R> & ThisType<Store<M>> = {};

Maybe you could declare a shorter type for Resolvable<StateInputFor<S>> to make it more readable.

2. ThisType of ActionTree should be Store<S>

Vuex actions are bound to the store. Therefore the ThisType in an ActionHandler is Store<S>. Currently you have to merge the type with ThisType<Store<M>> to make accessing injections like $axios work.

Maybe you could add this to your declaration to make it work out of the box.

3. Workaround for namespaced modules:

While we are waiting for microsoft/TypeScript#12754 to be implemented in Typescript, one could use the following workaround:

// store/a.ts
import R from '~/store/index';

export default interface S {
  callBAction(payload): Promise<void>;
}

export const actions: ActionTree<S, R> = {
  async callBAction({ dispatch }, payload) {
    dispatch("b/action", payload, { root: true });
  }
};

// store/b.ts
export default interface S {
  action(payload): Promise<void>;
}

// store/index.ts
import BStore from '~/store/b';
export interface S {
   "b/action": BStore["action"]
}

While this is nothing special it might help somebody to use namespace modules without big modifications.

4. Subsequent declarations

See my comment in #5



I hope my comments are understandable and you can use them to further improve your great library.

Thank you!

[ClickerMonkey]

1. I can do that (make a shorter type)
2. Can do (although not official, it is implemented this way)
3. I am working on the namespace issue in a feature branch.
4. Thanks for bringing this to my attention. Look in Subsequent property declarations must have the same type. Property 'store' must be of type 'Store<any>', but here has type 'Store<any>'. #5 for my workaround.

[mrkswrnr]

1. Thank you!
2. Again: thank you :-) ThisType was added in vuex@3.1.0: feat: add type annotation for the context of actions and mutations
3. Great to hear that!
4. See Subsequent property declarations must have the same type. Property 'store' must be of type 'Store<any>', but here has type 'Store<any>'. #5

If there is anything I can contribute, please let me know.

[ClickerMonkey]

Resolved with v1.0.2

3. Will be resolved with How create mapping from main Store and Modules at once? #1