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实例安装此helper属性：

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

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

2 个答案: