javascript - Vue.js modify computed property? - Stack Overflow

admin管理员组

文章数量:1333201

I am trying to modify a moment.js instance that resides in vue.js puted property like so.

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

Whenever I try to call it with a method like this one, nothing happens:

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

I am guessing this is because puted properties only allow to act as getters(and optionally setters). How can I change this behavior though?

I oversimplified the example since I am using the cmoputed property to fetch data from my vuex store. I am no longer able to manipulate it though.

Is there some way I can populate a local currentDate property with the vuex store's value so I can still manipulate it and add months, etc?

I have though about using the mounted property for this but I only mount my ponent once. Any help is wele.

I am trying to modify a moment.js instance that resides in vue.js puted property like so.

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

Whenever I try to call it with a method like this one, nothing happens:

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

I am guessing this is because puted properties only allow to act as getters(and optionally setters). How can I change this behavior though?

I oversimplified the example since I am using the cmoputed property to fetch data from my vuex store. I am no longer able to manipulate it though.

Is there some way I can populate a local currentDate property with the vuex store's value so I can still manipulate it and add months, etc?

I have though about using the mounted property for this but I only mount my ponent once. Any help is wele.

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuex

Share Improve this question Follow asked May 9, 2017 at 10:28 Stephan-vStephan-v 20.4k3232 gold badges121121 silver badges210210 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If your currentDate property belongs to your Vuex store, you shouldn't be manipulating it inside your ponents. You should instead: 1) map the getter locally as a puted property and 2) map the mutation locally as a method.

Here's an example of what your date Vuex module might look like:

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

And this is how the ponent would make use of it, without actually doing anything "locally":

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

You'd still be able to bind currentDate inside your ponent and call prevMonth as before, but now everything is being done via the Vuex single state.

Computed properties are not methods, that you can call. If you want to have such method, move currentDate to methods. The you also can invoke it from mounted.

本文标签： javascriptVuejs modify computed propertyStack Overflow