diff --git a/doc/@types/index.d.ts b/doc/@types/index.d.ts index 07a11cf..d16642c 100644 --- a/doc/@types/index.d.ts +++ b/doc/@types/index.d.ts @@ -69,6 +69,60 @@ declare namespace Doc { } } } + /** + * vuex getters + */ + interface getters { + /** + * 是否 使用 移动设备 访问 + * * 来自服务器端 + * * 这是一个例子 + */ + isMobile: boolean + + /** + * 是否 使用 移动设备 访问 + * * 来自 中间件-服务器端 + * * 这是一个例子 + */ + hello: string + + /** + * 测试 热加载 vuex + * * 来自 客户端 + * * 这是一个例子 + */ + testHotLoadingVuex: number + + /** + * 初始化 跳转访问 URL + * * 来自服务器端 + * * 这是一个例子 + */ + initialReplaceStateUrl: string + + /** + * 编辑器 + */ + editor?: { + test: string + deepTest: { + test1: string + test2: number + } + } + + /** + * 单元测试使用 + */ + test?: { + test: string + deepTest: { + test1: string + test2: number + } + } + } /** * vuex Mutation-tree @@ -140,21 +194,4 @@ declare namespace Doc { } } -export = Doc - -import { ActionTree, Store, MutationTree } from 'vuex' -/** - * vuex 创建 工具函数 - * * typescript namespace - */ -export namespace CreateVuex { - type SniffMutationPayload = T extends (state: any, payload: infer P) => any ? P : T - type SniffMutationPayloadTree> = { [K in keyof M]: SniffMutationPayload } - type SniffActionPayload = T extends (state: any, payload: infer P) => infer V - ? { payload: P; value: V } - : { payload: unknown; value: unknown } - type SniffActionPayloadTree> = { [K in keyof M]: SniffActionPayload } - type SniffActionPayloadPathTree> = { - [K in keyof M]: SniffMutationPayload - } -} \ No newline at end of file +export = Doc \ No newline at end of file diff --git a/doc/src/store/editor/index.ts b/doc/src/store/editor/index.ts new file mode 100644 index 0000000..038e677 --- /dev/null +++ b/doc/src/store/editor/index.ts @@ -0,0 +1,2 @@ +export const VUEX_NS = 'editor' +export type VUEX_NS = typeof VUEX_NS \ No newline at end of file diff --git a/doc/src/store/helpers.ts b/doc/src/store/helpers.ts index c749842..1cb9a19 100644 --- a/doc/src/store/helpers.ts +++ b/doc/src/store/helpers.ts @@ -1,8 +1,12 @@ import { Tstore } from '@types' -import { makeWrapper } from 'src/store/utils' +import { VuexStoreHelper } from 'src/store/utils' -export const globalHelper = makeWrapper() -export const editorHelper = makeWrapper('editor') +import { VUEX_NS as editor } from 'src/store/editor' + +const { makeWrapper } = new VuexStoreHelper() + +export const globalHelper = makeWrapper() +export const editorHelper = makeWrapper(editor) /** * 例子 1 diff --git a/doc/src/store/utils.ts b/doc/src/store/utils.ts index d9247b6..8930f13 100644 --- a/doc/src/store/utils.ts +++ b/doc/src/store/utils.ts @@ -1,7 +1,31 @@ import { ActionTree, Store, MutationTree, ActionContext } from 'vuex' -export class VuexHelper { - makeWrapper(namespace: keyof GlobalStates | string[] = ('' as any)) { +function isStore(context: Store) { + return 'strict' in context +} + +function checkStore(context: any, { namespace, args }) { + if (isStore(context)) { + checkNamespace(namespace, args) + } +} + +function checkNamespace(namespace: string[], args: any[]) { + // TODO: 完善深层namespace解析 + if (namespace) { + if (typeof namespace === 'string') { + args.unshift(namespace) + } else { + namespace = [ ...namespace ] + namespace.reverse().forEach(key => { + args.unshift(key) + }) + } + } +} + +export class VuexStoreHelper { + makeWrapper(namespace: keyof GlobalStates | string[] = ('' as any)) { type SniffMutationPayload = T extends (state: any, payload: infer P) => any ? P : T type SniffMutationPayloadTree> = { [K in keyof M]: SniffMutationPayload } type SniffActionPayload = T extends (state: any, payload: infer P) => infer V @@ -15,8 +39,7 @@ export class VuexHelper { type GetterTree = { [K in keyof G]: (state: T, getters: G, rootState: GlobalStates, rootGetters: GlobalGetters) => G[K] } - - const GetterTree: GetterTree = undefined as any + type TActionTree = ActionTree function createGetState() { function getState

( @@ -42,7 +65,7 @@ export class VuexHelper { path3: P3, ): T[P][P1][P2][P3] function getState(context: TActionContext, ...args: string[]) { - this.checkStore(context, { namespace, args }) + checkStore(context, { namespace, args }) let result for (let index = 0; index < args.length; index++) { const key = args[index] @@ -79,19 +102,17 @@ export class VuexHelper { path3: P3, ): G[P][P1][P2][P3] function getGetter(context: TActionContext, ...args: string[]) { - this.checkStore(context, { namespace, args }) - let result - for (let index = 0; index < args.length; index++) { - const key = args[index] - if (!result) result = context.getters[key] - else result = result[key] - if (!result) return - } - return result + checkStore(context, { namespace, args }) + const paths = args.join('/') + return context.getters[paths] } return getGetter } + function makeGetters(getters: GetterTree) { + return getters + } + function makeMutations>(mutationTree: M) { return mutationTree } @@ -125,7 +146,7 @@ export class VuexHelper { payload: SniffMutationPayloadTree[M], ): void function commit(context: TActionContext, ...args: any[]) { - this.checkStore(context, { namespace, args }) + checkStore(context, { namespace, args }) if (args.length < 2) { console.error('commit args.length must > 2') return @@ -138,8 +159,6 @@ export class VuexHelper { return commit } - type TActionTree = ActionTree - function makeActions(actionTree: A) { return actionTree } @@ -174,7 +193,7 @@ export class VuexHelper { payload: SniffActionPayloadTree[M]['payload'], ): SniffActionPayloadTree[M]['value'] function dispatch(context: TActionContext, ...args: any[]): any { - this.checkStore(context, { namespace, args }) + checkStore(context, { namespace, args }) if (args.length < 2) { console.error('commit args.length must > 2') return @@ -188,37 +207,13 @@ export class VuexHelper { } return { - GetterTree, createGetState, createGetGetter, + makeGetters, makeMutations, createCommit, makeActions, createDispatch, } } - - private isStore(context: Store) { - return 'strict' in context - } - - protected checkStore(context: any, { namespace, args }) { - if (this.isStore(context)) { - this.checkNamespace(namespace, args) - } - } - - protected checkNamespace(namespace: keyof GlobalStates | string[], args: any[]) { - // TODO: 完善深层namespace解析 - if (namespace) { - if (typeof namespace === 'string') { - args.unshift(namespace) - } else { - namespace = [ ...namespace ] - namespace.reverse().forEach(key => { - args.unshift(key) - }) - } - } - } } \ No newline at end of file diff --git a/doc/tests/unit/store/base-utils.spec.ts b/doc/tests/unit/store/base-utils.spec.ts index b10a759..6673fae 100644 --- a/doc/tests/unit/store/base-utils.spec.ts +++ b/doc/tests/unit/store/base-utils.spec.ts @@ -1,6 +1,6 @@ import { createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' -import { makeWrapper } from 'src/store/utils' +import { VuexStoreHelper } from 'src/store/utils' import { merge } from 'lodash' /** @@ -75,6 +75,7 @@ namespace Tstore { } } } +const { makeWrapper } = new VuexStoreHelper() describe('Vux base-utils.spec', () => { const defalutTestString = 'defalutTestString' @@ -113,6 +114,7 @@ describe('Vux base-utils.spec', () => { }, }) const getState = globalHelper.createGetState() + const getGetter = globalHelper.createGetGetter() const commit = globalHelper.createCommit() it('commit getState', () => {