Vuex - 如何在本地计算方法中使用 mapAction 中的函数答案

【问题标题】：Vuex - How to use function from mapAction within local computed methodVuex - 如何在本地计算方法中使用 mapAction 中的函数
【发布时间】：2020-01-04 23:02:08
【问题描述】：

我在我的 Vuex 商店中定义了这些 actions 和 getters。我现在想在我的本地计算属性中使用它们。我怎样才能？将 this 与操作名称一起使用会返回此错误：

"TypeError: this.updatePlan is not a function"

这是我想做的。

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

我的所有行为都不是async

为了完整起见，这里是我的操作

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

并且 store 被注入到所有组件中。见这里：

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

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

state & getters 可以合并为computed properties

actions & mutations 可以合并为methods

那么你应该使用他的maps 如下：

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

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

【讨论】：