ModuleTree<S, R>

[rodolphocastro]

What problem does this feature solve?

This interface might help when dealing with nested modules on stores using Typescript.

Currently the Module<S, R> interface exposes a single `ModuleTree´ which allows us to create one level of nested modules.

Exposing a ModuleTree<R> or a ModuleTree<S, R> would be inline with the current GetterTree<S, R> and other Trees and allow us to deeper nest our Modules.

I ran into this issue when attempting to create a nested module within a nested module using Typescript. The "parent" modules holds state for some supported features on the application and its children require to check those features in order to validate their actions. The root state (or parent of the parent, in this case) simply holds environment and version information.

What does the proposed API look like?

I belive that a new interface ModuleTree<S,R> might solve the issue:

export interface ModuleTree<S, R> {
  [key: string]: Module<S, R>;
}

Which could be added to the Current Module<S, R> interface as an or:

export interface Module<S, R> {
  namespaced?: boolean;
  state?: S | (() => S);
  getters?: GetterTree<S, R>;
  actions?: ActionTree<S, R>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<R> | ModuleTree<S, R>;
}

[kiaking]

Yea, we do have issue on typings in module, though not sure what exactly your problem is. Could you provide some example code where you having trouble with?

[rodolphocastro]

@kiaking Of course, I made a sample on a different project and extracted it to this gist

Store/Auth/OtherModule

The last module in the Tree:

// @/store/auth/othermod/index.ts
import { Module } from 'vuex'
import { AuthStateStorable } from '..'

export interface OtherStateStorable {
  somethingAwesome: string | undefined
}

const otherState : OtherStateStorable = {
  somethingAwesome: 'Hello There!'
}

const otherModule : Module<OtherStateStorable, AuthStateStorable> = {
  namespaced: true,
  state: otherState
}

export { otherModule }

Store/Auth/

The direct child of RootStore

import { Module } from 'vuex'
import { RootStateStorable } from '..'
import { authMutations } from './mutations'
import { authGetters } from './getters'
import { authActions } from './actions'

/**
 * Defines what's storable in my Auth Module
 */
export interface AuthStateStorable {
  loading: boolean,
  user: null | any,
  popupOpen: boolean,
  error: Error[]
}

const authState: AuthStateStorable = {
  loading: true,
  user: null,
  popupOpen: false,
  error: []
}

let authStore: Module<AuthStateStorable, RootStateStorable> = {
  namespaced: true,
  state: authState,
  mutations: authMutations,
  actions: authActions,    
  getters: authGetters,
  modules: {
    otherModule // Typescript error gets throw here: Type {otherModule: Module<OtherStateStorable, AuthStateStorable> is not assignable to type ModuleTree<RootStateStorable>
  }
}

export default authStore

Store/

The RootStore itself

import Vue from 'vue'
import Vuex, { GetterTree, MutationTree, ActionTree } from 'vuex'
import auth from './auth'
import { MyFeatures } from '@/models/MyFeatures'

Vue.use(Vuex)

/**
 * Defines what's storable in my Root Store.
 */
export interface RootStateStorable {
  features: MyFeatures
}

const rootState: RootStateStorable = {
  features: new MyFeatures(true, true)
}

const rootGetters: GetterTree<RootStateStorable, RootStateStorable> = {
  // Getters
}
  
const rootMutations: MutationTree<RootStateStorable> = {
  // Mutations  
}
  
const rootActions: ActionTree<RootStateStorable, RootStateStorable> = {
  // Actions
}
  
// Building and exporting our root store
export default new Vuex.Store({
  state: rootState,
  getters: rootGetters,
  mutations: rootMutations,
  actions: rootActions,
  modules: {
    auth // Works fine on the first level
  }
})

Getting past the error

Casting otherModule to any works to get past typechecking, but it feels a bit hacky:

let authStore: Module<AuthStateStorable, RootStateStorable> = {
  namespaced: true,
  state: authState,
  mutations: authMutations,
  actions: authActions,    
  getters: authGetters,
  modules: {
    otherModule: otherModule as any // Gets past typechecking w/o warnings or errors, but feels hacky
  }
}

Libraries and Versions

Those are the libraries and their versions on my project:

{
  "name": "my-project-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^1.6.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-brands-svg-icons": "^5.12.0",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "animate.css": "^3.7.2",
    "axios": "^0.19.2",
    "bulma": "^0.8.0",
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.10"
  }
}

[rodolphocastro]

What the error looks like on VSCode:

[kiaking]

@rodolphocastro Thanks for the code!

Yea you're getting that type error because you're passing parent module state AuthStateStorable as "root state" to the othermod. You must pass root state RootStateStorable.

So if you change othermod to this, it will stop throwing error.

// @/store/auth/othermod/index.ts
import { Module } from 'vuex'
import { RootStateStorable } from '../..' // <- Get root state.

export interface OtherStateStorable {
  somethingAwesome: string | undefined
}

const otherState : OtherStateStorable = {
  somethingAwesome: 'Hello There!'
}

// Pass root state as second generics argument.
const otherModule : Module<OtherStateStorable, RootStateStorable> = {
  namespaced: true,
  state: otherState
}

export { otherModule }

Does it make sense to you?

[rodolphocastro]

@kiaking I see! I guess it's a mistake on my end then haha, the change you proposed fixes the typescript error

I though that submodules' root state would be their parent's state, not the global root state. On my mind, after reading the docs for namespaced modules I though that the rootGetters would go "one level up" instead of up to the root level

So, just to be clear haha, I should expect the same behavior when building ActionTree<S,R> and GetterTree<S,R>, right?

Thanks!

[kiaking]

@rodolphocastro Exactly! Both getters and actions, the rootGetters refers to the real "root" getter. Not the parents 👍

[kiaking]

I think this issue is solved, so I'll closing it. Thank you for your feedback! 🎉