Vuex Getters 方法样式如何返回函数

Question

根据 Vuex 文档，您可以将有效负载传递给 getter 方法，只要该方法返回一个函数。
https://vuex.vuejs.org/en/getters.html

我不清楚如何格式化返回函数的函数。

就我而言，我想将产品对象传递给 getter 方法，并使用 product.price 数据和 state 中的数据来返回计算出的价格。

这是我目前采用的方法的精简版本:

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']),
    }
}

任何人都可以帮助我理解更好地返回函数的 setter/getter 吗？有没有更合适的方法来做到这一点？

我想，因为我实际上并没有改变状态数据，所以这种方法更适合作为 getter 而不是 mutator，但我愿意接受所有建议。

谢谢!

Answer 1

问题是您的 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);
},

这样我们就删除了第一级返回函数中的包装函数。