如何在 Vuex 中使用自定义对象方法？答案

【问题标题】：How to use custom object methods with Vuex?如何在 Vuex 中使用自定义对象方法？
【发布时间】：2019-01-15 13:44:03
【问题描述】：

我有几个自定义的 js 对象，我在其中封装了针逻辑。所以，这些对象根本与 vuex 没有关系，就像这样：

export default class Property {
   constructor(object) {
      // some logic
   }
   addChild(property) {
      // some logic
   }
}

另外，我的 vue 组件中有按钮，它触发 vue 方法：

methods: {
    addItem() {
        this.property.addChild();
    },
},

还有问题： this.property - 它是来自 vuex 商店的对象。因此，当我以这种方式调用方法时，会出现 vue 错误：

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

是的，我明白了，Vue 想要什么。但对我来说，将一些复杂的逻辑封装在针对象中更清楚。另外，我想将 vuex 用于全局应用程序状态。

那么，请您分享一下如何处理 vuex 和自定义对象方法的经验？

【问题讨论】：

【解决方案1】：

如果你想使用 vuex，你只需要使用 mutation 来改变它的状态。因此，在 Property 对象的 addChild 函数中，你会在哪里改变状态，我假设你会这样做

Store.state.xxx = 'new'

你不是那样做，而是叫突变

Store.commit('alterState')

在复杂性方面并没有太大区别，对吧？

【讨论】：