Vuex Getters 方法样式如何 Return 函数

Question

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

我不清楚如何格式化 return 函数。

在我的例子中，我想将产品对象传递给 getter 方法，并使用 product.price 数据和状态中的数据 return 计算价格.

这是我目前使用的方法的精简版：

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

任何人都可以帮助我理解 getterreturn 的功能更好吗？有没有更合适的方法来做到这一点？

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

谢谢！

Answer 1

问题是你的 getter 正在 returning 一个函数，它也是一个 return 函数，因此，当 Vuex 运行该函数时，它 return 是另一个函数这似乎被转换为字符串（可能是通过模板解析器？）。

只需确保 return 一个具有预期输出的函数，方法是更改此：

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

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

Vuex Getters 方法样式如何 Return 函数

Vuex Getters Method Style How to Return Function

vuex