direct-vuex

direct-vuex

Use and implement your Vuex store with TypeScript types. Direct-vuex doesn't require classes, therefore it is compatible with the Vue 3 composition API.

Install

First, add direct-vuex to a Vue application:

npm install direct-vuex

Create the store

The store can be implemented almost in the same way as usual.

Create the store:

import Vue from "vue"
import Vuex from "vuex"
import { createDirectStore } from "direct-vuex"

Vue.use(Vuex)

const { store, rootActionContext, moduleActionContext } = createDirectStore({
  // … store implementation here …
})

// Export the direct-store instead of the classic Vuex store.
export default store

// The following exports will be used to enable types in the
// implementation of actions.
export { rootActionContext, moduleActionContext }

// The following lines enable types in the injected store '$store'.
export type AppStore = typeof store
declare module "vuex" {
  interface Store<S> {
    direct: AppStore
  }
}

The classic Vuex store is still accessible through the store.original property. We need it to initialize the Vue application:

import Vue from "vue"
import store from "./store"

new Vue({
  store: store.original, // Inject the classic Vuex store.
  // …
}).$mount("#app")

Use typed wrappers from outside the store

From a component, the direct store is accessible through the direct property of the classic store:

const store = context.root.$store.direct // or: this.$store.direct

Or, you can just import it:

import store from "./store"

Then, the old way to call an action:

store.dispatch("mod1/myAction", myPayload)

… is replaced by the following wrapper:

store.dispatch.mod1.myAction(myPayload)

… which is fully typed.

Typed getters and mutations are accessible the same way:

store.getters.mod1.myGetter
store.commit.mod1.myMutation(myPayload)

Notice: The underlying Vuex store can be used simultaneously if you wish, through the injected $store or store.original.

Implement a Vuex Store with typed helpers

In a Vuex Module

Use createModule:

import { createModule } from "direct-vuex"
import { moduleActionContext } from "./store"

export interface Mod1State {
  p1: string
}

const mod1 = createModule({
  state: (): Mod1State => {
    return {
      p1: ""
    }
  }
  getters: {
    p1OrDefault(state) {
      // Here, the type of 'state' is 'Mod1State'.
      return state.p1 || "default"
    }
  },
  mutations: {
    SET_P1(state, p1: string) {
      // Here, the type of 'state' is 'Mod1State'.
      state.p1 = p1
    }
  },
  actions: {
    loadP1(context, payload: { id: string }) {
      const { dispatch, commit, getters, state } = mod1ActionContext(context)
      // Here, 'dispatch', 'commit', 'getters' and 'state' are typed.
    }
  },
})

export default mod1
export const mod1ActionContext = (context: any) => moduleActionContext(context, mod1)

It is possible to not use createModule. But then, it is necessary to append as const at the end of the module implementation object. It will allow direct-vuex to correctly infer the literal type of namespaced.

Warning: Types in the context of actions implies that TypeScript should never infer the return type of an action from the context of the action. Indeed, this kind of typing would be recursive, since the context includes the return value of the action. When this happens, TypeScript passes the whole context to any. Tl;dr; Declare the return type of actions where it exists!

A limitation on how to declare a State

In store and module options, the state property shouldn't be declared with the ES6 method syntax.

Valid:

  state: { p1: string } as Mod1State

  state: (): Mod1State => { p1: string }

  state: function (): Mod1State { return { p1: string } }

Invalid:

  state(): Mod1State { return { p1: string } }

I'm not sure why but TypeScript doesn't infer the state type correctly when we write that.

Get the typed context of a Vuex Action, but in the root store

  actions: {
    async actionInTheRootStore(context: any, payload) {
      const { commit, state } = rootActionContext(context)
      // … Here, 'commit' and 'state' are typed.
    }
  }

Use createGetters

import { createGetters } from "direct-vuex"

export interface Mod1State {
  p1: string
}

export default createGetters<Mod1State>()({
  getter1(state) {
    // Here, the type of 'state' is 'Mod1State'.
  },
})

Note: There is a limitation. The second parameters getters in a getter implementation, is not typed.

Use createMutations

import { createMutations } from "direct-vuex"

export default createMutations<Mod1State>()({
  SET_P1(state, p1: string) {
    // Here, the type of 'state' is 'Mod1State'.
    state.p1 = p1
  }
})

Use createActions

import { createActions } from "direct-vuex"

export default createActions({
  loadP1(context, payload: { id: string }) {
    const { dispatch, commit, getters, state } = mod1ActionContext(context)
    // Here, 'dispatch', 'commit', 'getters' and 'state' are typed.
  }
})

Contribute

With VS Code, our recommanded plugin is:

• TSLint from Microsoft (ms-vscode.vscode-typescript-tslint-plugin)