feat(mapStores): allow custom suffix

diff --git a/__tests__/mapHelpers.spec.ts b/__tests__/mapHelpers.spec.ts
index d256c84c4f55bfa5684b07256c870d7b1ac4bbd7..2ca4170f4cf755d6f4fe3a4692a7745b816f56ec 100644 (file)
--- a/__tests__/mapHelpers.spec.ts
+++ b/__tests__/mapHelpers.spec.ts
@@ -6,6 +6,7 @@ import {
   mapState,
   mapStores,
   PiniaPlugin,
+  setMapStoreSuffix,
 } from '../src'
 import { createLocalVue, mount } from '@vue/test-utils'
 import VueCompositionAPI, {
@@ -103,6 +104,30 @@ describe('Map Helpers', () => {
       expect(wrapper.text()).toBe('2 2 cart')
       expect(fromStore).toHaveBeenCalledTimes(2)
     })
+
+    it('can set custom suffix', async () => {
+      const pinia = createPinia()
+      setMapStoreSuffix('')
+      const Component = defineComponent({
+        template: `<p @click="main.n++">{{ main.n }}</p>`,
+        computed: {
+          ...mapStores(useStore),
+        },
+      })
+
+      const wrapper = mount(Component, { localVue, pinia })
+      // const store = useStore()
+      // const other = useCartStore()
+      expect(wrapper.vm.main).toBeDefined()
+      expect(wrapper.vm.mainStore).not.toBeDefined()
+      expect(wrapper.text()).toBe('0')
+      await nextTick()
+
+      await wrapper.trigger('click')
+      expect(wrapper.text()).toBe('1')
+      await wrapper.trigger('click')
+      expect(wrapper.text()).toBe('2')
+    })
   })
 
   it('mapGetters', () => {

diff --git a/src/index.ts b/src/index.ts
index ed2cbd328d2cf7b92a46fb8457abfe0811583ff6..2bddcd00357546df3c55f5395771e483504a1147 100644 (file)
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ export {
   mapState,
   mapGetters,
   MapStoresCustomization,
+  setMapStoreSuffix,
 } from './mapHelpers'
 
 // TODO: remove in beta

diff --git a/src/mapHelpers.ts b/src/mapHelpers.ts
index 65e176ba8a383bd8d749f77cf1a6c05e7ece73b9..e67bd99480c71c0b1c8c65d1a80703f193e3bd33 100644 (file)
--- a/src/mapHelpers.ts
+++ b/src/mapHelpers.ts
@@ -7,8 +7,15 @@ import {
   StoreDefinition,
 } from './types'
 
+/**
+ * Interface to allow customizing map helpers. Extend this interface with the
+ * following properties:
+ *
+ * - `suffix`: string. Affects the suffix of `mapStores()`, defaults to `Store`.
+ */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface MapStoresCustomization {
+  // cannot be added or it wouldn't be able to be extended
   // suffix?: string
 }
 
@@ -49,6 +56,23 @@ function getCachedStore<
   return (cache[id] || (cache[id] = useStore(vm.$pinia))) as Store<Id, S, G, A>
 }
 
+export let mapStoreSuffix = 'Store'
+
+/**
+ * Changes the suffix added by `mapStores()`. Can be set to an empty string.
+ * Defaults to `"Store"`. Make sure to extend the MapStoresCustomization
+ * interface if you need are using TypeScript.
+ *
+ * @param suffix - new suffix
+ */
+export function setMapStoreSuffix(
+  suffix: 'suffix' extends keyof MapStoresCustomization
+    ? MapStoresCustomization['suffix']
+    : string // could be 'Store' but that would be annoying for JS
+): void {
+  mapStoreSuffix = suffix
+}
+
 /**
  * Allows using stores without the composition API (`setup()`) by generating an
  * object to be spread in the `computed` field of a component. It accepts a list
@@ -76,7 +100,7 @@ export function mapStores<Stores extends GenericStoreDefinition[]>(
 ): Spread<Stores> {
   return stores.reduce((reduced, useStore) => {
     // @ts-ignore: $id is added by defineStore
-    reduced[useStore.$id + 'Store'] = function (this: Vue) {
+    reduced[useStore.$id + mapStoreSuffix] = function (this: Vue) {
       return getCachedStore(this, useStore)
     }
     return reduced