michaelolof / vuex-class-component

A Type Safe Vuex Module or Store Using ES6 Classes and ES7 Decorators written in TypeScript.
217 stars 21 forks source link

Unable to access Vuex actions within Nuxt fetch hook #62

Closed domi91c closed 3 years ago

domi91c commented 4 years ago

I'm trying to access Vuex actions from within the Nuxt fetch hook in my page components. Here's an example of a module I'm trying to access:

...
declare var $nuxt: any

@Module({namespacedPath: 'casts'})
export class CastStore extends VuexModule {
  cast?: Cast = undefined
  casts: Cast[] = []

  @mutation SET_CAST(cast: Cast) {
    this.cast = cast
  }

  @mutation SET_CASTS(casts) {
    this.casts = casts
  }

  @mutation ADD_CAST(cast) {
    this.casts.push(cast)
  }

  @action
  async fetchCasts() {
    console.log('fetching casts...')
    await $nuxt.$axios.$get('casts').then(res => {
      this.SET_CASTS(res)
    })
  }

  @action
  async fetchCast() {
    console.log('fetching cast...')
    await $nuxt.$axios.$get('casts').then(res => {
      this.SET_CAST(res)
    })
  }

}

Here's the fetch call:

async fetch ({ store }) {
  await store.dispatch('casts/fetchCasts');
}

This results in the following error: unknown action type: casts/fetchCasts

Just thought I'd ask to see if I'm missing anything obvious.

Thanks