CODEWITHSUNDEEP
vue.jsvuexnuxt.js
zcserei
zcserei

Reputation: 665

Vuex action "not a function" inside Nuxt fetch

I have just introduced error handling to one of my Nuxt pages and apparently the action mapped and called inside fetch raises a not a function error. If the try/catch block isn't there it works as expected and there's no error at all.

Here is my component stripped to the essential parts:

export default {
  name: 'ViewArticle',
  async fetch ({ error }) {
    try {
      await this.fetchArticle({ articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
    }
  },
  computed: {
    ...mapGetters({
      article: 'article/single'
    }),
    articleSlug () {
      return this.$route.params.articleSlug
    }
  },
  methods: {
    ...mapActions({
      fetchArticle: 'article/fetchOne'
    })
  }
}

I am assuming that somehow mapActions only gets executed later in the spiel, but can't figure out how to prevent the error. This way, basically every time I load the page it gets immediately redirected to the error page.

The error message I'm getting is the following. Obviously fetchArticle is a function, and unless it's inside the try/catch block, it works as expected.

this.fetchArticle is not a function                                                                                                               03:30:51

  at Object.fetch (52.js:32:18)
  at server.js:2881:39
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:2864:51)

Upvotes: 4

Views: 1901

Answers (2)

Ilijanovic
Ilijanovic

Reputation: 14904

Fetch provides the context as argument.

fetch(context)

Inside the context we can find our store. Here you can take a look what context contains: https://nuxtjs.org/api/context

fetch(context) {
   let store = context.store;
}

People like to destructure it

fetch({ store }) {}

Your code should look like this:

  async fetch ({ error, store }) {
    try {
      await store.dispatch('article/fetchOne', { articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
    }
  },

Fetch gets executed on the server side, thats why you get is not an function error. Its undefined

... fetch is called on server-side...

Upvotes: 3

Mohsen
Mohsen

Reputation: 4235

Use async fetch({store})

  async fetch ({ error, store }) {
    try {
      await store.dispatch( 'article/fetchOne' , { articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
  }

Upvotes: 0

Related Questions