background

Vuex is not friendly to TS support. We define a bunch of states, but we don’t know which namespaces and which getters or actions are available when using the mapXXX method

Vuex-ts-enhance, by means of the type derivation function of TS, can provide the type derivation of state, actions, getters, mutations and Dispatch when using VUEX. The above problems are solved

Simple to use

import { EnhanceStore } from 'vuex-ts-enhance'
import Vue from 'vue'
const state = {
    state: {
        // rootState
        root: {}
    },
    getters: {
        rootGet() { return 1 }
    },
    actions: {
        // rootActions
        setRoot(context, payload: string) {}
    },
    mutations: {
        setRoot(state, payload: string){}
    },
    modules: {
        sub: {
            namespaced: true,
            state: {
                substate: ' '
            },
            actions: {
                setSubState(context, payload: number) {}
            },
            mutations: {
                setSubState(state, payload: number) {}
            },
            getters: {
                suGet() { return 2}},}}}export const { mapGetters, store, mapActions, mapMutations, mapState } = s;
new Vue({
    store
})
Copy the code

So we’re going to do the initialization, we’re going to pass state into our constructor, and we’re going to return a mapXXXX method with a type derivation, and we’re going to know exactly what data or methods are available for a particular Namespaced method.

Now take a look at vscode’s hints

You can see that mapGetters has a rootGetters named rootGet, and you can deduce its type when you use it

You can also see that mapActions has a namespace called sub in it, and it has a method called setSubState in it

Dispatches, on the other hand, can only be imported

Using the example dispatch(namespace, Actions, payload) or dispatch(rootActions, payload)

The type derivation of dispatchpayload is not currently supported, but will be added later

The complete code

<template>
  <div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapGetters, mapActions, mapState, mapMutations } from './store'
export default Vue.extend({
  computed: {
    ...mapGetters(['rootGet']),
  },
  mounted() {
    this.rootGet // type number
    this.setSubState // type (payload: number) => Promise<void>
    dispatch('sub'.'setSubState'.1)},methods: {
    ...mapActions('sub'['setSubState'])}});</script>
Copy the code

The above derivation also supports mapGetters, mapActions, mapState, mapMutations, and Dispatch

Pay attention to

  • If you usetypescriptPlease don’tstateDefined asStoreOptionsBecause this would invalidate the type derivation
const state: StoreOptions<any> = {} // don't do that
Copy the code
  • If you are usingjs, and usedjsdocLet me define it. Make sure I write itcontextIs defined asanyOtherwise the type check will fail
const state = {
  actions: {
    /** * @param {any} context * @param {string} payload */
    someActions(context, payload) {}
  }
}
Copy the code

End

The above code is based on the prompts that exist under lant=ts, but if it is under lang= JS, vetur sometimes prompts types, and sometimes does not. See the issue for details. I can’t find the problem yet. However, the mapXXXX method’s prompt still works because it does not rely on Vetur