CODEWITHSUNDEEP
vue.jsvuex
ToddT
ToddT

Reputation: 3258

Vuex - How to use function from mapAction within local computed method

I have these actions and getters defined on my Vuex store. I now want to use them in my local computed properties. How can I? Using this with the action name returns this error:

"TypeError: this.updatePlan is not a function"

This is what I would LIKE to do.

computed: {   
...mapGetters([
  'returnShop',
  'returnPlan',
  'returnFulfillmentEnabled'
]),
...mapActions([
  'getShop',
  'updatePlan'
]),
selectPlan: {
  get() {
    this.returnPlan;
  },
  set(value) {
    this.updatePlan(value);
  }
 }
},

None of my actions are async

For completeness here are my actions

  actions: {
    getShop: ({ commit }, payload) => {
      axios.get("/admin/wine_app/shops").then(response => {
        commit('changeShop', response.data);
      }); 
    },
    updatePlan: ({ commit }, payload) => {
      commit('changePlan', payload);
    }
  }

And the store IS injected into all components. See here:

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

Upvotes: 0

Views: 1366

Answers (1)

Christian Carrillo
Christian Carrillo

Reputation: 2761

state & getters can be merged as computed properties

actions & mutations can be merged as methods

then u should use his maps as below:

computed: {
  ...mapGetters([
    'returnShop',
    'returnPlan',
    'returnFulfillmentEnabled'
  ]),
  selectPlan: {
    get() {
      this.returnPlan;
    },
    set(value) {
      this.updatePlan(value);
    }
  }
},

methods: {
  ...mapActions([
    'getShop',
    'updatePlan'
  ])
}

Upvotes: 2

Related Questions