Question

根据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吗？有没有更合适的方法来做到这一点？

我认为，因为我实际上并没有改变状态数据，所以这种方法更像吸气剂而不是变异器，但我对所有建议都持开放态度。

谢谢！

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);
},

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

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

1 个答案: