Vue.js 如何修改计算属性？

Question

我正在尝试修改一个在vue.js计算属性中的moment.js实例，代码如下。

computed: {
    currentDate() {
        return moment();
    }
}

每当我尝试使用这种方式调用它的方法时，什么也不会发生：

methods: {
    prevMonth() {
        this.currentDate = moment(this.currentDate).subtract(1, 'months');
    }
}

我猜这是因为计算属性只允许作为getter(和可选的setter)。但我如何改变这种行为呢？

我过于简化了这个例子，因为我正在使用计算属性从我的vuex存储中获取数据。但是我不再能够操纵它。

有没有办法可以利用本地的currentDate属性来填充vuex存储的值，以便我仍然可以操纵它并添加月份等？

我考虑使用mounted属性来实现这一点，但我只挂载了一次组件。任何帮助都是受欢迎的。

- Stephan-v

Answer 1

如果你的 currentDate 属性属于 Vuex Store，那么你不应该在组件内部操作它。相反，你应该：1）将 getter 映射为本地计算属性，2）将 mutation 映射为本地方法。

以下是一个示例，展示了你的 date Vuex 模块可能会是什么样子：

export default {
    state: {
        currentDate: moment()
    },
    mutations: {
        subtractMonth (state, date) {
            state.currentDate = moment(state.currentDate).subtract(1, 'months');
        }
    },
    getters: {
        getCurrentDate: (state) => {
            return state.currentDate
        }
    }
}

以下是组件如何使用它，而无需在“本地”执行任何操作：

import { mapGetters, mapMutations } from 'vuex'
export default {
    computed: {
        ...mapGetters({
            currentDate: 'getCurrentDate'
        })
    },
    methods: {
        ...mapMutations({
            prevMonth: 'subtractMonth'
        })
    }
}

你仍然可以在组件中绑定currentDate并像以前一样调用prevMonth，但现在所有操作都通过Vuex单一状态进行。

- Tomas Buteler

---

但你无法在不提交mutations的情况下更改currentDate属性。这意味着我必须将所有操作'moment()'实例的本地（简单）方法移动到我的store中作为mutations。我认为这并没有道理。 - Stephan-v

映射变化意味着this.prevMonth()实际上是this.$store.commit('subtractMonth')，因此每次调用该方法都会提交一个mutation。如果您的moment实例在Vuex状态中，则只能通过突变状态来操作它。如果不是，那么您的问题缺少一些信息，我们无法提供理想的答案。 - Tomas Buteler

Answer 2

计算属性不是可以调用的方法。如果你想要这样的方法，将currentDate移动到方法中。然后你也可以从mounted中调用它。

- Staszek

---

在这种情况下，它将不再是一个属性实例，也不会成为本地状态的一部分。当vuex存储中不存在currentDate时，我需要将属性currentDate默认设置为moment()，或者在设置时将其与vuex存储值一起使用。 - Stephan-v

好的，我建议修改问题，以便您准确地解释您想要实现什么。我有一种感觉，您已经到了某个死胡同，而您想要实现的目标可以用更简单的方法实现。 - Staszek

抱歉，由于我已经深入其中并且试图简化这个问题，所以很难解释清楚。不过问题已经解决了。我基本上需要将vuex的状态复制到本地组件的状态中。我使用了created()来实现这一点。如果不复制vuex的状态，就无法对其进行操作。还是谢谢你的帮助。 - Stephan-v