Vuex action "not a function" inside Nuxt fetch

Question

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)

What is the exact error message, please

Phil
– Phil

2020-10-06 01:47:25 +00:00
Commented Oct 6, 2020 at 1:47 — Phil
– Phil, Commented Oct 6, 2020 at 1:47
@Phil just updated my question with it

zcserei
– zcserei

2020-10-06 01:56:45 +00:00
Commented Oct 6, 2020 at 1:56 — zcserei
– zcserei, Commented Oct 6, 2020 at 1:56
what version of Nuxt you are using?

Muhammad
– Muhammad

2020-10-06 04:17:53 +00:00
Commented Oct 6, 2020 at 4:17 — Muhammad
– Muhammad, Commented Oct 6, 2020 at 4:17

Ilijanovic · Accepted Answer · 2020-10-06 06:03:24Z

3

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...

answered Oct 6, 2020 at 6:03

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohsen · Accepted Answer · 2020-10-06 05:42:06Z

0

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' })
  }

edited Oct 6, 2020 at 5:42

answered Oct 6, 2020 at 5:36

Mohsen

4,2551 gold badge34 silver badges33 bronze badges

Collectives™ on Stack Overflow

Vuex action "not a function" inside Nuxt fetch

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related