Вспомогательный метод для определения вычисляемых свойств 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 не является функцией - пробовал разные вещи, такие как его использование, например, функция микширования / плагина / без стрелок и т. Д., Но ничего не работает - это даже возможно

Любые советы будут высоко оценены.

EDIT:

Единственный способ, которым мне удалось это сделать в данный момент, - это определить его как помощника и импортировать его в каждый модуль, который я хочу использовать так:

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

, поэтому я могу использовать его для определения вычисленного значения:

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

Но я бы хотел не импортировать это и иметь его встроенным (глобально) в каждый компонент.

РЕДАКТИРОВАТЬ 2:

Я думаю, что это может быть связано с порядком запуска / жизненного цикла Vue.js, поскольку, если я консоль регистрирую этот метод в created ловушке, он выглядит хорошо, так что, вероятно, что-то связано с тем, что определения объектов этих вычисленных методов каким-то образом проанализировал раньше чем этот глобальный метод зарегистрирован?

РЕДАКТИРОВАТЬ 3:

Я быстро создал более простую версию, которую я хочу достичь (не работает) в песочнице кода, с которой можно поиграться: https://codesandbox.io/s/x3661n317o

Answer 1

Вы можете определить метод mixin в вашем globalHelpers.js, например, 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);