CODEWITHSUNDEEP
javascriptvue.jsvuex
Ershad Qaderi
Ershad Qaderi

Reputation: 481

mapping actions from a nemespaced vuex modules into components methods works only with one of the 2 avialable syntaxes

This works just fine: 

  methods: {
    ...mapActions('event', ['fetchEvents'])
  }

But if I change it to this:

  methods: {
    ...mapActions(['event/fetchEvents'])
  }

then this errors apear in console:

[Vue warn]: Error in created hook: "TypeError: this.fetchEvents is not a function"

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>                                                                   vue.runtime.esm.js:587


TypeError: "this.fetchEvents is not a function"
        created EventList.vue:29
        VueJS 17                                                                 vue.runtime.esm.js:1737

​ What am I doing wrong here? both of these syntaxes are legit based on vuex documentation

Upvotes: 0

Views: 167

Answers (1)

Anatoly
Anatoly

Reputation: 22803

Because you didn't indicate an alias for the action it must be called like this:

this['event/fetchEvents']

If you wish to call the action like this.fetchEvents you should call mapActions like this:

...mapActions({
  fetchEvents: 'event/fetchEvents'
})

Upvotes: 1

Related Questions