javascript - 定义 Vue.js 计算属性的辅助方法

Question

我正在使用 Vue.js 和 Vuex 模块。在几乎每个模块中，我都有一个名为 updateProp 的操作和突变，如下所示:

updateProp ({commit}, payload) {
  commit('updateProp', payload)
}
updateProp (state, payload) {
  state[payload.propName] = payload.newVal
}

那么当我定义一些在 Vuex 中有源的计算属性时，我会写:

myComputedValue: {
  get () {
    return this.$store.state.vuexModuleName.propertyName
  },
  set (newValue) {
    this.$store.dispatch('vuexModuleName/updateProp', {propName: 'propertyName', newVal: newValue})
  }
}

我经常必须像这样定义多个计算值，所以我想我应该创建一个全局帮助器方法:

Vue.prototype.$computedDefHelper = (computedPropModel, computedPropName) => {
  return {
    get () {
      return this.$store.state[computedPropModel][computedPropName]
    },
    set (newVal) {
      this.$store.dispatch(`${computedPropModel}/updateProp`, {propName: computedPropName, newVal: newVal})
    }
  }
}

所以我将能够以更短的方式定义这些计算值:

myComputedValue: this.$computedDefHelper('vuexModuleName', 'propertyName')

但这不起作用 - 我收到一个错误，$compulatedDefHelper不是一个函数 - 尝试了各种方法，例如将其用作混合/插件/非箭头函数等，但似乎什么也没有工作 - 这可能吗？

任何提示都将受到高度赞赏。

编辑:

目前我设法让它工作的唯一方法是将其定义为助手并将其导入到我想要使用它的每个模块中:

import { computedDefHelper } from '@/helpers/globalHelpers'

这样我就可以用它来定义计算值:

myComputedValue: computedDefHelper('vuexModuleName', 'propertyName')

但我想避免导入它并将其内置(全局)在每个组件中。

编辑2:

我认为这可能与触发/生命周期 Vue.js 内容的顺序有关，因为如果我在 created Hook 中控制台记录此方法，它看起来很好，所以可能与这些计算相关方法对象定义在注册此全局方法之前以某种方式进行解析？

编辑3:

我已经快速创建了一个更简单的版本，我想在代码沙箱中实现(不起作用)来玩:https://codesandbox.io/s/x3661n317o

Answer 1

您可以在 globalHelpers.js 中定义 mixin 方法，例如 updater:

const computedDefHelper = {
  install(Vue, options) {
    Vue.mixin({
      methods: {
        updater: function(name, payload) {
          return this.$store.dispatch(`${name}/updateProp`, payload);
        }
      }
    });
  }
};
export default computedDefHelper;

然后将其导入到 main.js 中:

import computedDefHelper from '@/helpers/globalHelpers';
Vue.use(computedDefHelper);

您现在可以在每个组件中使用它，如下所示:

this.updater('vuexModuleName', payload)

其中payload可以根据您想要的参数进行修改。