programing

Vue.js에서 계산된 속성을 수정하시겠습니까?

kingscode 2022. 7. 14. 22:38
반응형

Vue.js에서 계산된 속성을 수정하시겠습니까?

수정하려고 합니다.moment.js존재하는 인스턴스vue.js이렇게 계산된 속성입니다.

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

다음과 같은 방법으로 호출하려고 해도 아무 일도 일어나지 않습니다.

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

이것은 계산된 속성이 getter(및 옵션 설정자) 역할만 허용하기 때문이라고 추측합니다.그런데 어떻게 하면 이 동작을 바꿀 수 있을까요?

CMopated 속성을 사용하여 데이터 가져오기 때문에 예제를 지나치게 단순화했습니다.vuex하지만 더 이상 조작할 수 없습니다.

지역 주민에게 정보를 제공할 수 있는 방법이 있나요?currentDate의 소유물건vuex스토어 값을 조작하거나 월수를 추가할 수 있도록 할 수 있습니까?

사용 방법을 생각해 보았습니다.mounted단, 컴포넌트를 마운트하는 것은1번뿐입니다.어떤 도움이라도 환영합니다.

만약 당신이currentDate속성은 Vuex 스토어에 속하므로 컴포넌트 내에서 조작해서는 안 됩니다.대신 1) getter를 계산 속성으로 로컬로 매핑하고 2) 변환을 메서드로 로컬로 매핑해야 합니다.

여기 그 예가 있습니다.dateVuex 모듈은 다음과 같습니다.

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메서드로 이동합니다.를 호출할 수도 있습니다.mounted.

언급URL : https://stackoverflow.com/questions/43867369/vue-js-modify-computed-property

반응형