vuex-ts-prompt

vuex-ts-prompt is a tool for vuex and TypeScript 4.1+。

thanks

• 陪尤雨溪一起，实现 Vuex 无限层级类型推断。（TS 4.1 新特性） - SegmentFault 思否
• xingbofeng/vuex-typescript-commit-dispatch-prompt: vuex typescript commit dispatch prompt (github.com)

Start

npm install typescript --save-dev
npm i vuex-ts-prompt --save

then modify your store.ts

import Vuex from 'vuex';
import { GetActionsType, GetGettersType, GetMutationsType, GetPayLoad, GetReturnType, GetStateType } from 'vuex-ts-prompt';

const vuexOptions = {
    state,
    getters,
    actions,
    mutations,
    modules: {
        home,
        detail,
    }
};

export type State = GetStateType<typeof vuexOptions>

export type Getters = GetGettersType<typeof vuexOptions>

type Mutations = GetMutationsType<typeof vuexOptions>;

type Actions = GetActionsType<typeof vuexOptions>;

// state?: S | (() => S);
// getters?: GetterTree<S, S>;
// 这里把 state 类型设置为 any 是为了让参数不受约束
const store = new Vuex.Store<any>(vuexOptions)

then add folder types and add file store.d.ts

import { Commit, Dispatch, Getters, State } from '@/store'

declare module 'vue/types/vue' {
	export declare class Store<S> {
		state: State
		getters: Getters
		dispatch: Dispatch
		commit: Commit
	}

	interface Vue {
		$store: Store<State>
	}
}

Reading

typescript对vuex的全支持

使用截图

• 全局变量 $store

  

• state

  

  

• getters

  

  

  

• commit

  

  

  

• dispatch