定义 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')

但这不起作用 - 我收到一个错误，$computedDefHelper 不是一个函数 - 尝试了各种事情，比如像混合/插件/非箭头函数等使用它，但似乎没有任何工作 - 它甚至可能吗？

任何提示将不胜感激。

编辑：

我目前管理它的唯一方法是将其定义为帮助程序并将其导入我想使用的每个模块中：

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

所以我可以用它来定义计算值：

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

但我想避免导入它，并且已经在每个组件中（全局）内置了它。

编辑 2：

我认为这可能与触发/生命周期 Vue.js 东西的顺序有关，因为如果我在 created 钩子中控制台记录此方法，它看起来不错，所以可能与这些计算方法对象定义在某种程度上有关在注册这个全局方法之前解析？

编辑 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 可以根据你想要的参数进行修改。

Answer 2

我认为您需要为此创建一个插件并使用 Vue 实例安装此辅助属性，如下所示：

  import computedDefHelper from '@/helpers/globalHelpers'

  const Plugin = {

    install: (myVue, options) => {
      const aVue = myVue;
      aVue.prototype.$computedDefHelper = computedDefHelper;
    },
  };

  export default Plugin;

在你的 main.js 文件中像这样：

Vue.use(Plugin);