Search code examples
vue.jsvuex

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

Solution

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