docs: How to use other modules?

[yangxinp]

How to use other modules?

// store/index.ts
import * as user from './user'

export const state = () => ({
  device: 'mobile'
})

export const getters = getterTree(state, {
  isMobile: (state) => state.device === 'mobile'
})

export const mutations = mutationTree(state, {
  setDevice(state, newValue: string) {
    state.device = newValue
  }
})

export const actions = actionTree(
  { state, getters, mutations },
  {
    async nuxtServerInit(vuexCxt, nuxtCxt: Context) {
      // Error: Argument of type '"user/info"' is not assignable to parameter of type 'never'.ts(2345)
      vuexCxt.commit('user/info', { name: 'xxx' })


      // Error: 'actions' implicitly has type 'any' because it does not have a type annotation
      // and is referenced directly or indirectly in its own initializer.ts(7022)
      // Error: 'accessorType' implicitly has type 'any' because it does not have a type annotation
      // and is referenced directly or indirectly in its own initializer.ts(7022)
      this.app.$accessor.user.info({ name: 'xxx' })
    }
  }
)

export const accessorType = getAccessorType({
  actions,
  getters,
  mutations,
  state,
  modules: { user }
})

// index.d.ts
import { accessorType } from '~/store'

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    // If used: vuexCxt.commit('user/init')
    // Error: '$accessor' is referenced directly or indirectly in its own type annotation.ts(2502)
    $accessor: typeof accessorType
  }
}

[danielroe]

@NaClyxp My apologies for the delayed response.

Typescript 3.7 has brought some limitations on type inference. Specifically, there is now an issue with an accessor type used in the same module that exports it (thus, it only affects ~/store/index.ts).

So I would amend your code as follows:

export const accessorType = getAccessorType({
  // actions,
  getters,
  mutations,
  state,
    modules: { user }
  })

It's not optimal, but unfortunately it seems to be required at the moment.

[tre-dev]

I've got 2 submodules: A and B.

When I call a function from A, I also want to call a function from B, (via this.app.$accessor.B.someFunction) but this results in the error mentioned by the issue creator. Note: this isn't the root module, aka index.ts, but rather a submodule calling another submodule.

While commenting out actions worked for turning off the error when calling it from the root module, it doesn't work for submodules.

What are my options here?

Thanks!

[tre-dev]

@danielroe

Sorry for the ping. Is there a potential workaround? Because right now, I'm not able to use any of the type definitions, as I'm ignoring the error via @ts-ignore.

[danielroe]

@tre-dev Apologies. It's a real pain, and is a change that began with TypeScript 3.7 that I've not been able to chase down.

Here's a workaround:

import { actionTree, useAccessor } from 'nuxt-typed-vuex'
import * as siblingPattern from '~/store/sibling'

export const state = () => ({
  test: '',
})

export const actions = actionTree(
  { state },
  {
    initialise() {
      const sibling = useAccessor(
        this.app.$store,
        siblingPattern,
        'sibling'
      )
      sibling.runMySiblingAction()
    },
  }
)

[tre-dev]

Thanks for the quick reply!

this.app.$store doesn't exist for me. Only this.app.store. And when I use this.app.store, my getters are undefined. I'm able to access the state variable, but when I then try to run a mutation sibling.runSiblingMutation, then I'm getting [vuex] unknown mutation type.

[danielroe]

@tre-dev Sorry, forgot one thing - and you're quite right about this.app.store!

It should be:

const sibling = useAccessor(
  this.app.store,
  { ...siblingPattern, namespaced: true },
  'submodule'
)

The namespaced option is required in this case because Nuxt invisibly adds it to any store modules. Or you can just add export const namespaced = true to your module - it shouldn't interfere with anything, but will clean up this kind of usage.

[tre-dev]

Sorry, thought I'd answered already. That worked perfectly!

[shindex]

I got the same error and was troubled.
But when I noticed, type inference started to work.
The solution is not well known, but I do report.

store/age.ts

[shindex]

When will this issue be completely fixed?

[Bernix01]

any update on this?

[danielroe]

I've left this open to remind me to add something to the docs, rather than because I am hoping to change the behaviour of this module. As far as I'm aware, it's not an issue I can fix; it's to do with TypeScript wanting to avoid circular references. The best solution is from @shindex - annotate return type on actions/getters, etc. that you wish to reference circularly.

[MrJmpl3]

Any example to use with nuxt/auth module?

[danielroe]

@MrJmpl3 Could you explain a little more what you mean?

[MrJmpl3]

@MrJmpl3 Could you explain a little more what you mean?

Sorry, a type, I mean to auth module of Nuxtjs, https://auth.nuxtjs.org/ , because when use this module, the auth plugin don't register the namespace for auth.

[danielroe]

@MrJmpl3 Ah, I see. Could you open a new issue for that - and maybe provide a reproduction? 🙃