preface

When I used React as a project, THE TS integration was very advanced. Now the vue2 project needs to be upgraded, so I took the opportunity to upgrade the framework to Vue3.0 and fully integrate TS. However, there are still many unsatisfactory aspects, especially the lack of complete TS support for official maintenance of VUex. I was really disappointed. The dispatch method has intelligent notification for type and payload.

So spent several days, to improve their own hands, code to write several versions, and finally found a simple and quick way to achieve, and is a step in place, without any transformation.

The code has been uploaded to Github, interested friends can learn together. Making: github.com/nicefan/vue…

Introduction to the

  • To enhancestate,gettersInfinite hierarchy of attribute hints, and support read-only verification;
  • To enhancecommit,dispatchMethods detect all operation type names and check load parameters;
  • Support modulenamespacedAttribute configuration to concatenate names.

Use effect

The installation

$ yarn add vuex-ts-enhanced
Copy the code

use

import { createStore} from 'vuex'
import { ExCreateStore } from 'vuex-ts-enhanced'

class State {
  count: number = 1
}

export const store = (createStore as ExCreateStore)({
  state: new State()
  ...
})
Copy the code

Or, using the override declaration, add a d.ts file to your project folder:

// vuex.d.ts
declare module 'vuex' {
  export * from 'vuex/types'
  export { createStore } from 'vuex-ts-enhanced'
}
Copy the code

This allows you to use the Vuex without changing any of the original methods.

Global type complement

When store is installed into a Vue application, the this.$store property is mounted and store is injected as an application-level dependency. InjectionKey = InjectionKey; InjectionKey = InjectionKey; InjectionKey = InjectionKey; InjectionKey = InjectionKey; InjectionKey = InjectionKey; InjectionKey = InjectionKey; InjectionKey = InjectionKey; To do this, we can type store as follows:

import { store } from '.. /src/store'

interface InjectionMap {
  'store': typeof store
}

declare module '@vue/runtime-core' {

  interface ComponentCustomProperties {
    $store: InjectionMap['store']}export function inject<S extends keyof InjectionMap> (key:S) :InjectionMap[S]}Copy the code

Matters needing attention

  • Unsupported functions

    • Object mode subdivision or commit is not supported because there is no restriction that the payload must be object type;
    • Registering global actions in namespaced modules is not supported and is not recommended.
    • Modules that do not support dynamic registration can be used(store.dispatch as any)('doSomething')To skip the check;

  • CreateStore

    ({… }) do not specify

    manually, the default will be inferred automatically from the State option; When you need a custom type, define it using class and set the initial value, then create an instance in the State configuration item.

    class State {
  name = ' '
  count = 1list? :string[] = []}const store = createStore({
  state: new State(),
  ...
}
Copy the code