Vuex Getters 메서드 스타일 함수 반환 방법

Vuex Getters 메서드 스타일 함수 반환 방법

Vuex 매뉴얼에 따르면 메서드가 함수를 반환하는 한 getter 메서드에 페이로드를 전달할 수 있습니다.https://vuex.vuejs.org/en/getters.html

함수를 반환하는 함수를 포맷하는 방법을 모르겠습니다.

저 같은 경우에는 getter 메서드에 상품 오브젝트를 전달하고 해당 상태의 데이터와 함께 product.price 데이터를 사용하여 계산된 가격을 반환하고 싶습니다.

다음은 현재 사용하고 있는 접근 방식을 정리한 것입니다.

const store = new Vuex.Store({
    state: {
        product: {
            price: 12.99,
        },
        colors_front: 1,
        colors_back: 0,
    },
    getters: {
        printPrice: (state) => (product) => {
            return (state, product) => {
                var colors_front = state.print_product.colors_front,
                    colors_back = state.print_product.colors_back;

                print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);

                return parseFloat(print_price).toFixed(2);
            }
        },
    }
}

컴포넌트의 이 getter에 접속하려고 하면 함수 코드가 텍스트 문자열로 수신됩니다.

<template>
    <div>{{ printPrice(product) }}</div>
</template>

export default {
    computed: {
        ...mapState(['product']),
        ...mapGetters(['printPrice']),
    }
}

함수를 반환하는 게터를 더 잘 이해할 수 있도록 도와줄 사람 있나요?더 적절한 방법이 있을까요?

주 데이터를 변환하는 것이 아니기 때문에, 이 방법은 돌연변이보다 게터의 역할을 하는 것이 좋다고 생각했습니다만, 저는 모든 제안을 받아들일 수 있습니다.

감사합니다!

문제는 getter가 함수를 반환하는 함수를 반환하고 있기 때문에 Vuex가 함수를 실행할 때 문자열에 캐스트된 것으로 보이는 다른 함수를 반환한다는 것입니다(템플릿 파서에 의해 반환될 수 있음).

다음 사항을 변경하여 예상되는 출력과 함께 단일 함수를 반환해야 합니다.

printPrice: (state) => (product) => {
        return (state, product) => {
        var colors_front = state.print_product.colors_front,
           colors_back = state.print_product.colors_back;

        print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);

        return parseFloat(print_price).toFixed(2);
    }
},

다음과 같이 입력합니다.

printPrice: (state) => (product) => {
    var colors_front = state.print_product.colors_front,
       colors_back = state.print_product.colors_back;

    print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);

    return parseFloat(print_price).toFixed(2);
},

그렇게 해서 제1레벨 반품기능에서 포장기능을 없앴습니다.

언급URL : https://stackoverflow.com/questions/49621958/vuex-getters-method-style-how-to-return-function