vuex

vuex copied to clipboard

Better intelligent prompt and TS checks and without affecting functions already supported by TS.

• Enhance state, getters infinite hierarchical property hints, and support read-only checks.
• Enhanced commit, dispatch methods sense all operational type names and check payload parameters.
• Support the 'namespaced' attribute configuration to automatically generate 'type' parameter names.

Unsupported actions:

1. does not support object-style commit or dispatch because there is no limit to the payload must be object type
2. does not support register global action in namespaced modules, this usage is not recommended
3. does not support dynamic registration of the module, need to use (store.dispatch as any) ('doSomething') way to skip detection,

Incompatible usage methods:

1. createStore<State>({...})
   The type specified through generics cannot be supported because all configuration items need to be passed!
   Instead of manually specifying <State>, the default will automatically infer from the state option; When you need a custom type, use class to define and set the initial value, and then create an instance in the state configuration item;

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

2. const key: InjectionKey<Store<State>> = Symbol()
   The current store type needs to use the <typeof store > way

3. global type supplement

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]
}

更好的提供感知提示及TS校验，在不影响已有TS支持的功能情况下， 增强 state, getters 无限层级属性提示，并支持只读校验； 增强 commit、dispatch 方法感知所有操作类型名称并对载荷参数校验，类型名称支持namespaced配置进行拼接。

不支持的操作：
1、不支持对象方式分发或提交，因为没有限制载荷必须为对象类型 2、不支持在带命名空间的模块注册全局 action，不推荐这种用法 3、不支持动态注册的模块， 需要使用 (store.dispatch as any)('doSomething') 的方式来跳过检测