Vue.js 修改计算属性？

Posted 2023-02-23

【中文标题】Vue.js 修改计算属性？

【英文标题】：Vue.js modify computed property?

【发布时间】：2017-10-07 14:53:10

【问题描述】：

我正在尝试修改位于 vue.js 计算属性中的 moment.js 实例，如下所示。

computed: 
    currentDate() 
        return moment();
    

每当我尝试用这样的方法调用它时，什么都没有发生：

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

我猜这是因为计算属性只允许充当 getter（和可选的 setter）。不过，我怎样才能改变这种行为？

由于我使用 cmoputed 属性从我的 vuex 存储中获取数据，因此我过度简化了示例。不过，我不再能够操纵它了。

有什么方法可以用 vuex 商店的值填充本地 currentDate 属性，以便我仍然可以操纵它并添加月份等？

虽然我想为此使用mounted 属性，但我只安装我的组件一次。欢迎任何帮助。

【参考方案1】：

如果您的 currentDate 属性属于您的 Vuex 存储，则您不应该在组件中对其进行操作。相反，您应该：1) 将 getter 本地映射为计算属性，2) 将突变本地映射为方法。

这是您的 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 单一状态完成。

【讨论】：

你不能在不提交突变的情况下改变 currentDate 属性。这意味着我必须将所有操纵moment() 实例的本地（简单）方法作为突变移动到我的存储中。我不认为这是合理的。

映射突变意味着this.prevMonth() 实际上是this.$store.commit('subtractMonth')，因此您每次调用该方法时正在提交突变。如果你的 moment 实例处于 Vuex 状态，你只能通过改变状态来操作它。如果不是，那么您的问题中缺少某些内容，否则我们无法提供理想的答案。

【参考方案2】：

计算属性不是您可以调用的方法。如果您想拥有这样的方法，请将currentDate 移至方法。您也可以从mounted 调用它。

【讨论】：

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

好的，我建议修改问题，以便您准确解释您想要实现的目标。我有一种感觉，你走到了尽头，你想要达到的目标可以通过更简单的方式实现。

对不起，这真的很难解释，因为我很远，我试图过分简化这一点。不过我已经解决了。我非常需要将vuex 状态复制到本地组件状态。我使用created() 来做到这一点。我需要复制 vuex 状态，否则无法操作。不过感谢您的帮助。