From 05678b23ef024539256fd7dd8a72f8b6537bf855 Mon Sep 17 00:00:00 2001 From: Ricardo Nolde Date: Fri, 10 Dec 2021 00:22:55 +1100 Subject: [PATCH 1/3] feat: add inline namespace for global helpers --- src/global.ts | 128 +++++++++++++++++++++++++++++++++++----------- src/namespaced.ts | 79 ++++------------------------ src/util.ts | 4 ++ 3 files changed, 114 insertions(+), 97 deletions(-) diff --git a/src/global.ts b/src/global.ts index 8ff94e1..c779b0f 100644 --- a/src/global.ts +++ b/src/global.ts @@ -1,50 +1,120 @@ import {Store} from 'vuex/types'; import {computed} from '@vue/composition-api'; -import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, ExtractGetterTypes, ExtractTypes, KnownKeys, RefTypes} from './util'; +import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, ExtractGetterTypes, ExtractTypes, KnownKeys, RefTypes, Namespace, Nullish} from './util'; function computedState(store: any, prop: string) { return computed(() => store.state[prop]); } +function computedNamespacedState(store: any, namespace: string, prop: string) { + let module = namespace.split('/').reduce((module, key) => module[key], store.state) + return computed(() => module[prop]) +} + export function useStore() { return getStoreFromInstance() as Store } -export function useState(storeOrMap: Store | KnownKeys[], map?: KnownKeys[]): RefTypes { - let store = storeOrMap; - - if (arguments.length === 1) { - map = store as KnownKeys[]; - store = getStoreFromInstance(); +export function useState(map: KnownKeys[]): RefTypes; +export function useState(storeOrNamespace: Store | Namespace, map?: KnownKeys[]): RefTypes; +export function useState(store: Store | Nullish, namespace?: Namespace, map?: KnownKeys[]): RefTypes; +export function useState(storeOrNamespace: KnownKeys[] | Store | Namespace, namespaceOrMap?: KnownKeys[] | Namespace, map?: KnownKeys[]): RefTypes { + let realStore, realNamespace, realMap; + if (arguments.length >= 3) { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = namespaceOrMap as string || null; + realMap = map as KnownKeys[] || null; + } else if (arguments.length === 2) { + if (typeof storeOrNamespace === 'string') { + realStore = getStoreFromInstance(); + realNamespace = storeOrNamespace as string || null; + } else { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = null + } + realMap = namespaceOrMap as KnownKeys[] || null; + } else { + realStore = getStoreFromInstance(); + realNamespace = null; + realMap = storeOrNamespace as KnownKeys[] || null; } - return useMapping(store, null, map, computedState); + return useMapping(realStore, realNamespace, realMap, !realNamespace ? computedState : computedNamespacedState); } -export function useGetters(storeOrMap: Store | KnownKeys[], map?: KnownKeys[]): ExtractGetterTypes { - let store = storeOrMap; - if (arguments.length === 1) { - map = store as KnownKeys[]; - store = getStoreFromInstance(); +export function useGetters(map: KnownKeys[]): ExtractGetterTypes; +export function useGetters(storeOrNamespace: Store | Namespace, map?: KnownKeys[]): ExtractGetterTypes; +export function useGetters(store: Store | Nullish, namespace?: Namespace, map?: KnownKeys[]): ExtractGetterTypes; +export function useGetters(storeOrNamespace: KnownKeys[] | Store | Namespace, namespaceOrMap?: KnownKeys[] | Namespace, map?: KnownKeys[]): ExtractGetterTypes { + let realStore, realNamespace, realMap; + if (arguments.length >= 3) { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = namespaceOrMap as string || null; + realMap = map as KnownKeys[] || null; + } else if (arguments.length === 2) { + if (typeof storeOrNamespace === 'string') { + realStore = getStoreFromInstance(); + realNamespace = storeOrNamespace as string || null; + } else { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = null + } + realMap = namespaceOrMap as KnownKeys[] || null; + } else { + realStore = getStoreFromInstance(); + realNamespace = null; + realMap = storeOrNamespace as KnownKeys[] || null; } - return useMapping(store, null, map, computedGetter); + return useMapping(realStore, realNamespace, realMap, computedGetter); } -export function useMutations(storeOrMap: Store | KnownKeys[], map?: KnownKeys[]): ExtractTypes { - let store = storeOrMap; - - if (arguments.length === 1) { - map = store as KnownKeys[]; - store = getStoreFromInstance(); +export function useMutations(map: KnownKeys[]): ExtractTypes; +export function useMutations(storeOrNamespace: Store | Namespace, map?: KnownKeys[]): ExtractTypes; +export function useMutations(store: Store | Nullish, namespace?: Namespace, map?: KnownKeys[]): ExtractTypes; +export function useMutations(storeOrNamespace: KnownKeys[] | Store | Namespace, namespaceOrMap?: KnownKeys[] | Namespace, map?: KnownKeys[]): ExtractTypes { + let realStore, realNamespace, realMap; + if (arguments.length >= 3) { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = namespaceOrMap as string || null; + realMap = map as KnownKeys[] || null; + } else if (arguments.length === 2) { + if (typeof storeOrNamespace === 'string') { + realStore = getStoreFromInstance(); + realNamespace = storeOrNamespace as string || null; + } else { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = null + } + realMap = namespaceOrMap as KnownKeys[] || null; + } else { + realStore = getStoreFromInstance(); + realNamespace = null; + realMap = storeOrNamespace as KnownKeys[] || null; } - return useMapping(store, null, map, getMutation); + return useMapping(realStore, realNamespace, realMap, getMutation); } -export function useActions(storeOrMap: Store | KnownKeys[], map?: KnownKeys[]): ExtractTypes { - let store = storeOrMap; - - if (arguments.length === 1) { - map = store as KnownKeys[]; - store = getStoreFromInstance(); +export function useActions(map: KnownKeys[]): ExtractTypes; +export function useActions(storeOrNamespace: Store | Namespace, map?: KnownKeys[]): ExtractTypes; +export function useActions(store: Store | Nullish, namespace?: Namespace, map?: KnownKeys[]): ExtractTypes; +export function useActions(storeOrNamespace: KnownKeys[] | Store | Namespace, namespaceOrMap?: KnownKeys[] | Namespace, map?: KnownKeys[]): ExtractTypes { + let realStore, realNamespace, realMap; + if (arguments.length >= 3) { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = namespaceOrMap as string || null; + realMap = map as KnownKeys[] || null; + } else if (arguments.length === 2) { + if (typeof storeOrNamespace === 'string') { + realStore = getStoreFromInstance(); + realNamespace = storeOrNamespace as string || null; + } else { + realStore = storeOrNamespace as Store || getStoreFromInstance(); + realNamespace = null + } + realMap = namespaceOrMap as KnownKeys[] || null; + } else { + realStore = getStoreFromInstance(); + realNamespace = null; + realMap = storeOrNamespace as KnownKeys[] || null; } - return useMapping(store, null, map, getAction); -} + return useMapping(realStore, realNamespace, realMap, getAction); +} \ No newline at end of file diff --git a/src/namespaced.ts b/src/namespaced.ts index 598cd8a..7bc4a62 100644 --- a/src/namespaced.ts +++ b/src/namespaced.ts @@ -1,69 +1,12 @@ -import {computed} from '@vue/composition-api'; -import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, KnownKeys, RefTypes, ExtractTypes, ExtractGetterTypes} from './util'; import {Store} from 'vuex'; +import {computed} from '@vue/composition-api'; +import {computedGetter, getAction, getMutation, getStoreFromInstance, useMapping, KnownKeys, RefTypes, ExtractTypes, ExtractGetterTypes, Nullish} from './util'; +import {useActions, useState, useGetters, useMutations} from './global' -export type Nullish = null | undefined; - -function computedState(store: any, namespace: string, prop: string) { - let module = namespace.split('/').reduce((module, key) => module[key], store.state) - return computed(() => module[prop]) -} - -export function useNamespacedState(storeOrNamespace: Store | string | Nullish, namespaceOrMap: string | KnownKeys[], map?: KnownKeys[]): RefTypes { - let store: Store, namespace: string; - - if (arguments.length === 2) { - store = getStoreFromInstance(); - map = namespaceOrMap as KnownKeys[]; - namespace = storeOrNamespace as string; - } else { - store = storeOrNamespace as Store || getStoreFromInstance(); - namespace = namespaceOrMap as string; - } - return useMapping(store, namespace, map, computedState); -} - -export function useNamespacedMutations(storeOrNamespace: Store | string | Nullish, namespaceOrMap: string | KnownKeys[], map?: KnownKeys[]): ExtractTypes { - let store: Store, namespace: string; - - if (arguments.length === 2) { - store = getStoreFromInstance(); - map = namespaceOrMap as KnownKeys[]; - namespace = storeOrNamespace as string; - } else { - store = storeOrNamespace as Store || getStoreFromInstance(); - namespace = namespaceOrMap as string; - } - return useMapping(store, namespace, map, getMutation); -} - -export function useNamespacedActions(storeOrNamespace: Store | string | Nullish, namespaceOrMap: string | KnownKeys[], map?: KnownKeys[]): ExtractTypes { - let store: Store, namespace: string; - - if (arguments.length === 2) { - store = getStoreFromInstance(); - map = namespaceOrMap as KnownKeys[]; - namespace = storeOrNamespace as string; - } else { - store = storeOrNamespace as Store || getStoreFromInstance(); - namespace = namespaceOrMap as string; - } - return useMapping(store, namespace, map, getAction); -} - -export function useNamespacedGetters(storeOrNamespace: Store | string | Nullish, namespaceOrMap: string | KnownKeys[], map?: KnownKeys[]): ExtractGetterTypes { - let store: Store, namespace: string; - - if (arguments.length === 2) { - store = getStoreFromInstance(); - map = namespaceOrMap as KnownKeys[]; - namespace = storeOrNamespace as string; - } else { - store = storeOrNamespace as Store || getStoreFromInstance(); - namespace = namespaceOrMap as string; - } - return useMapping(store, namespace, map, computedGetter); -} +export const useNamespacedActions = useActions +export const useNamespacedGetters = useGetters +export const useNamespacedMutations = useMutations +export const useNamespacedState = useState export function createNamespacedHelpers(storeOrNamespace: Store | string, namespace?: string):{ useState: (map?: KnownKeys[]) => RefTypes; @@ -81,9 +24,9 @@ export function createNamespacedHelpers[]) => useNamespacedState(store, namespace as string, map), - useGetters: (map?: KnownKeys[]) => useNamespacedGetters(store, namespace as string, map), - useMutations: (map?: KnownKeys[]) => useNamespacedMutations(store, namespace as string, map), - useActions: (map?: KnownKeys[]) => useNamespacedActions(store, namespace as string, map), + useState: (map?: KnownKeys[]) => useState(store, namespace as string, map), + useGetters: (map?: KnownKeys[]) => useGetters(store, namespace as string, map), + useMutations: (map?: KnownKeys[]) => useMutations(store, namespace as string, map), + useActions: (map?: KnownKeys[]) => useActions(store, namespace as string, map), } } diff --git a/src/util.ts b/src/util.ts index c22bceb..b21263a 100644 --- a/src/util.ts +++ b/src/util.ts @@ -17,6 +17,10 @@ declare type InferGetterType = ? ReturnType : any; +export declare type Nullish = null | undefined; + +export declare type Namespace = string | Nullish; + export declare type ExtractTypes = { readonly [K in keyof O]: InferType; }; From d113212c9fd517ef5eafde4ac8143921bc4cbc4d Mon Sep 17 00:00:00 2001 From: Ricardo Nolde Date: Sat, 11 Dec 2021 18:52:01 +1100 Subject: [PATCH 2/3] test: add unit tests for the new namespace+map variant --- tests/global-actions.test.ts | 97 +++++++++++++++++++++++++- tests/global-getters.test.ts | 121 ++++++++++++++++++++++++++++++++- tests/global-mutations.test.ts | 95 +++++++++++++++++++++++++- tests/global-state.test.ts | 116 ++++++++++++++++++++++++++++++- 4 files changed, 419 insertions(+), 10 deletions(-) diff --git a/tests/global-actions.test.ts b/tests/global-actions.test.ts index 00009fc..2c4d54d 100644 --- a/tests/global-actions.test.ts +++ b/tests/global-actions.test.ts @@ -1,5 +1,5 @@ import Vue from 'vue'; -import Vuex, { ActionTree } from 'vuex'; +import Vuex, {ActionTree, Module} from 'vuex'; import {shallowMount} from '@vue/test-utils'; import {getLocalVue} from './utils/local-vue'; @@ -12,7 +12,7 @@ describe('"useActions" - global store actions helpers', () => { localVue = getLocalVue(); }); - describe('when given both store and map', () => { + describe('when given store and map', () => { it('should dispatch action with given payload', () => { const clickValue = 'demo-click-' + Math.random(); const dispatcher = jest.fn(); @@ -166,6 +166,97 @@ describe('"useActions" - global store actions helpers', () => { expect(dispatcher).toBeCalledTimes(1); expect(dispatcher).toBeCalledWith(store.state, clickValue); }); - }) + }); + + describe('when given namespace and map', () => { + it('should dispatch action with given payload', () => { + const clickValue = 'demo-click-' + Math.random(); + const dispatcher = jest.fn(); + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + }, + actions: { + doTest: ({state}, payload) => { + dispatcher(state, payload); + } + } + }; + const store = new Vuex.Store({ + state: {}, + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
click
', + setup() { + const {doTest} = useActions('foo', ['doTest']); + return { + doTest + } + } + }, + {localVue, store} + ); + + expect(dispatcher).not.toBeCalled(); + + wrapper.find('div').trigger('click'); + + expect(dispatcher).toBeCalledTimes(1); + expect(dispatcher).toBeCalledWith(storeModule.state, clickValue); + }); + + it('should dispatch a typed action with given payload', () => { + const clickValue = 'demo-click-' + Math.random(); + const dispatcher = jest.fn(); + + interface Actions { + doTest: (ctx: any, payload: string) => void + } + + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + }, + actions: { + doTest: ({state}, payload) => { + dispatcher(state, payload); + } + } + }; + const store = new Vuex.Store({ + state: {}, + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
click
', + setup() { + const {doTest} = useActions('foo', ['doTest']); + const onClicked = () => doTest(clickValue); + return { + onClicked, + doTest + } + } + }, + {localVue, store} + ); + + expect(dispatcher).not.toBeCalled(); + + wrapper.find('div').trigger('click'); + + expect(dispatcher).toBeCalledTimes(1); + expect(dispatcher).toBeCalledWith(storeModule.state, clickValue); + }); + }); }); diff --git a/tests/global-getters.test.ts b/tests/global-getters.test.ts index aa38065..2d227e6 100644 --- a/tests/global-getters.test.ts +++ b/tests/global-getters.test.ts @@ -1,5 +1,5 @@ import Vue from 'vue'; -import Vuex, { GetterTree } from 'vuex'; +import Vuex, {GetterTree, Module} from 'vuex'; import {shallowMount} from '@vue/test-utils'; import {getLocalVue} from './utils/local-vue'; @@ -13,7 +13,7 @@ describe('"useGetters" - global store getters helpers', () => { localVue = getLocalVue(); }); - describe('when given both store and map', () => { + describe('when given store and map', () => { it('should render component using a state getter', () => { const value = 'getter-demo' + Math.random(); const store = new Vuex.Store({ @@ -326,4 +326,121 @@ describe('"useGetters" - global store getters helpers', () => { expect(watcher).toBeCalledTimes(1); }); }); + + describe('when given namespace and map', () => { + it('should render component using a state getter', () => { + const value = 'getter-demo' + Math.random(); + + const storeModule: Module = { + namespaced: true, + getters: { + valGetter: () => value + } + }; + const store = new Vuex.Store({ + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
{{valGetter}}
', + setup() { + const {valGetter} = useGetters('foo', ['valGetter']); + return { + valGetter + } + } + }, + {localVue, store} + ); + + expect(wrapper.text()).toBe(store.getters['foo/valGetter']); + expect(wrapper.text()).toBe(value); + }); + + it('should change component contents according a getter change', async () => { + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + }, + getters: { + testGetter: (state) => state.val + } + }; + const store = new Vuex.Store({ + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
{{val}}
', + setup() { + const {testGetter} = useGetters('foo', ['testGetter']); + return { + val: testGetter + } + } + }, + {localVue, store} + ); + + // original value + expect(wrapper.text()).toBe(storeModule.state.val); + + // change value, but not yet rendered + storeModule.state.val = 'new value' + Math.random(); + expect(wrapper.text()).not.toBe(storeModule.state.val); + + // wait for rendering + await wrapper.vm.$nextTick(); + + // now it should be rendered + expect(wrapper.text()).toBe(storeModule.state.val); + }); + + it('should trigger a watcher according a getter change', async () => { + const watcher = jest.fn(); + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + }, + getters: { + testGetter: (state) => state.val + } + }; + const store = new Vuex.Store({ + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
{{val}}
', + setup() { + const {testGetter} = useGetters('foo', ['testGetter']); + + watch(testGetter, watcher); + + return { + val: testGetter + } + } + }, + {localVue, store} + ); + expect(watcher).toBeCalledTimes(0); + + + storeModule.state.val = 'new value' + Math.random(); + + // wait for rendering + await wrapper.vm.$nextTick(); + + expect(watcher).toBeCalledTimes(1); + }); + }); }); diff --git a/tests/global-mutations.test.ts b/tests/global-mutations.test.ts index 241f749..68a0d74 100644 --- a/tests/global-mutations.test.ts +++ b/tests/global-mutations.test.ts @@ -1,5 +1,5 @@ import Vue from 'vue'; -import Vuex, { MutationTree } from 'vuex'; +import Vuex, {Module, MutationTree} from 'vuex'; import {shallowMount} from '@vue/test-utils'; import {getLocalVue} from './utils/local-vue'; @@ -130,6 +130,97 @@ describe('"useMutations" - global store mutations helpers', () => { expect(mutate).toBeCalledWith(clickValue); expect(store.state.val).toBe(clickValue); }); - }) + }); + + describe('when given namespace and map', () => { + it('should dispatch action with given payload', () => { + const clickValue = 'demo-click-' + Math.random(); + const mutate = jest.fn(); + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + }, + mutations: { + doTest: (state, payload) => { + state.val = payload; + mutate(payload); + } + } + }; + const store = new Vuex.Store({ + state: {}, + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
click
', + setup() { + const {doTest} = useMutations('foo', ['doTest']); + return { + doTest + } + } + }, + {localVue, store} + ); + + expect(mutate).not.toBeCalled(); + + wrapper.find('div').trigger('click'); + + expect(mutate).toBeCalledTimes(1); + expect(mutate).toBeCalledWith(clickValue); + }); + + it('should dispatch action with given payload', () => { + const clickValue = 'demo-click-' + Math.random(); + const mutate = jest.fn(); + interface Mutations { + doTest: (state: any, payload: string) => void; + } + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + }, + mutations: { + doTest: (state, payload) => { + state.val = payload; + mutate(payload); + } + } + }; + const store = new Vuex.Store({ + state: {}, + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: `
click
`, + setup() { + const {doTest} = useMutations('foo', ['doTest']); + const onClicked = () => doTest(clickValue); + return { + onClicked, + doTest + } + } + }, + {localVue, store} + ); + + expect(mutate).not.toBeCalled(); + + wrapper.find('div').trigger('click'); + + expect(mutate).toBeCalledTimes(1); + expect(mutate).toBeCalledWith(clickValue); + }); + }); }); diff --git a/tests/global-state.test.ts b/tests/global-state.test.ts index 48fa30c..9938287 100644 --- a/tests/global-state.test.ts +++ b/tests/global-state.test.ts @@ -1,5 +1,5 @@ import Vue from 'vue'; -import Vuex from 'vuex'; +import Vuex, {Module} from 'vuex'; import {shallowMount} from '@vue/test-utils'; import {getLocalVue} from './utils/local-vue'; @@ -13,7 +13,7 @@ describe('"useState" - global store state helpers', () => { localVue = getLocalVue(); }); - describe('when given both store and map', () => { + describe('when given store and map', () => { it('should render component using a state value', () => { const store = new Vuex.Store({ state: { @@ -245,6 +245,116 @@ describe('"useState" - global store state helpers', () => { expect(watcher).toBeCalledTimes(1); }); - }) + }); + + describe('when given namespace and map', () => { + it('should render component using a state value', () => { + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + } + }; + const store = new Vuex.Store({ + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
{{stateVal}}
', + setup() { + const {val} = useState('foo', ['val']); + return { + stateVal: val + } + } + }, + {localVue, store} + ); + + expect(wrapper.text()).toBe(storeModule.state.val); + }); + + it('should change component contents according a state change', async () => { + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + } + }; + const store = new Vuex.Store({ + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
{{stateVal}}
', + setup() { + const {val} = useState('foo', ['val']); + return { + stateVal: val + } + } + }, + {localVue, store} + ); + + // original value + expect(wrapper.text()).toBe(storeModule.state.val); + + // change value, but not yet rendered + storeModule.state.val = 'new value' + Math.random(); + expect(wrapper.text()).not.toBe(storeModule.state.val); + + // wait for rendering + await wrapper.vm.$nextTick(); + + // now it should be rendered + expect(wrapper.text()).toBe(storeModule.state.val); + }); + + it('should trigger a watcher according a state change', async () => { + const watcher = jest.fn(); + const storeModule: Module = { + namespaced: true, + state: { + val: 'test-demo' + Math.random() + } + }; + const store = new Vuex.Store({ + state: {}, + modules: { + foo: storeModule + } + }); + + const wrapper = shallowMount({ + template: '
{{stateVal}}
', + setup() { + const {val} = useState('foo', ['val']); + + watch(val, watcher); + + return { + stateVal: val + } + } + }, + {localVue, store} + ); + + expect(watcher).toBeCalledTimes(0); + + storeModule.state.val = 'new value' + Math.random(); + + // wait for rendering + await wrapper.vm.$nextTick(); + + expect(watcher).toBeCalledTimes(1); + + }); + }); }); From 8e61c4b8f1a5be131da95d5ca975f1ba79c0326e Mon Sep 17 00:00:00 2001 From: Ricardo Nolde Date: Sat, 11 Dec 2021 19:06:05 +1100 Subject: [PATCH 3/3] chore: add some extra documentation for the new variant --- README.md | 15 ++++++++++++++- tests/global-mutations.test.ts | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cb6ae43..7b6c350 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ export default { ### Namespaced Usage Examples +#### `createNamespacedHelpers` ```js import { createNamespacedHelpers } from 'vuex-composition-helpers'; const { useState, useActions } = createNamespacedHelpers('articles'); // specific module name @@ -76,7 +77,7 @@ You can also import your store from outside the component, and create the helper ```js import { createNamespacedHelpers } from 'vuex-composition-helpers'; import store from '../store'; // local store file -const { useState, useActions } = createNamespacedHelpers(store, 'articles'); // specific module name +import const { useState, useActions } = createNamespacedHelpers(store, 'articles'); // specific module name const { fetch } = useActions(['fetch']); export default { @@ -96,6 +97,18 @@ export default { } ``` +#### Inline namespacing +```js +import { useState, useActions } from 'vuex-composition-helpers'; + +export default { + setup(props) { + const { article, comments } = useState('sections/blog', ['article', 'comments']); + return { article, comments } + } +} +``` + ### Typescript mappings You can also supply typing information to each of the mapping functions to provide a fully typed mapping. diff --git a/tests/global-mutations.test.ts b/tests/global-mutations.test.ts index 68a0d74..4fa9896 100644 --- a/tests/global-mutations.test.ts +++ b/tests/global-mutations.test.ts @@ -12,7 +12,7 @@ describe('"useMutations" - global store mutations helpers', () => { localVue = getLocalVue(); }); - describe('when given both store and map', () => { + describe('when given store and map', () => { it('should commit mutation with given payload', () => { const clickValue = 'demo-click-' + Math.random(); const mutate = jest.fn();