greenpress / vuex-composition-helpers

A util package to use Vuex with Composition API easily.
https://www.npmjs.com/package/vuex-composition-helpers
MIT License
288 stars 32 forks source link

Type inference lost when exported/imported as module #47

Closed willwinberg closed 2 years ago

willwinberg commented 2 years ago

Hi. I have a large Vue 2 application that utilizes my store modules in many different places. I'm also using this awaesome package ("vuex-composition-helpers": "^1.0.21") along with ("@vue/composition-api": "^1.0.2") My vuex modules are all typed and I have an accessor file that looks like this

@/composables/organizationStore.ts
import { createNamespacedHelpers } from 'vuex-composition-helpers'
import {
  OrganizationState,
  OrganizationGetters,
  OrganizationActions,
  OrganizationMutations
} from '@/store/modules/organization/organizationTypes'

export const {
  useState: useOrganizationState,
  useGetters: useOrganizationGetters,
  useActions: useOrganizationActions,
  useMutations: useOrganizationMutations
} = createNamespacedHelpers<
  OrganizationState,
  OrganizationGetters,
  OrganizationActions,
  OrganizationMutations
>('organization')

and i import it in to relevant components like so. However, when I access it in the setup method, the types are lost.

Organizations.vue
...
import { useOrganizationState, useOrganizationGetters, useOrganizationActions, useOrganizationMutations } from '@/composables/organizationStore'
...
setup() {
...
const { organizationAlert } = useOrganizationGetters(['organizationAlert'])
< const organizationAlert: any > :[
...

It works though if I do all of the configureation directly in the component:

Organizations.vue
...
import { createNamespacedHelpers } from 'vuex-composition-helpers'
import {
  OrganizationState,
  OrganizationGetters,
  OrganizationActions,
  OrganizationMutations
} from '@/store/modules/organization/organizationTypes'
const {
  useState: useOrganizationState,
  useGetters: useOrganizationGetters,
  useActions: useOrganizationActions,
  useMutations: useOrganizationMutations
} = createNamespacedHelpers<
  OrganizationState,
  OrganizationGetters,
  OrganizationActions,
  OrganizationMutations
>('organization')
...
setup() {
...
const { organizationAlert } = useOrganizationGetters(['organizationAlert'])
< organizationAlert(state: OrganizationState): AlertOptions > :D
...

My main goal here is to eliminate having to repeat all the above code in every component that uses the store and rather just use: ie. import { useOrganizationGetters } from '@/composables/organizationStore'

Is this even possible? I can't find out for the life of me what I'm missing here.

davidmeirlevy commented 2 years ago

Hi!

Would you care to add a unit test / set of unit tests that apply to your case? It will help me find the solution.

Thanks.

willwinberg commented 2 years ago

Sorry, forgot to update this. For some reason, modifying my accessor file to this fixed the issue:

@/composables/organizationStore.ts
import { createNamespacedHelpers } from 'vuex-composition-helpers'
import {
  OrganizationState,
  OrganizationGetters,
  OrganizationActions,
  OrganizationMutations
} from '@/store/modules/organization/organizationTypes'

const {
  useState,
  useGetters,
  useActions,
  useMutations
} = createNamespacedHelpers<
  OrganizationState,
  OrganizationGetters,
  OrganizationActions,
  OrganizationMutations
>('organization')

export const useOrganizationState = useState
export const useOrganizationGetters = useGetters
export const useOrganizationActions = useActions
export const useOrganizationMutations = useMutations