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

根据 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，但我愿意接受所有建议。

谢谢!

请您参考如下方法:

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

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