Question

我的Vuex商店中有两个吸气剂

 getters: {
    itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0),
    totalPrice: state => state.lines.reduce((total,line) => total +
        (line.quantity*line.product.price),0)
},

它们在以下组件中显示reduce的结果

<template>
<div class="float-right">
    <small>
        Your cart:
        <span v-if="itemCount > 0">
            {{ itemCount}} item(s) {{ totalPrice | currency}}
        </span>
        <span v-else>
            (empty)
        </span>
    </small>
        <b-button variant="dark"
                  to="/cart"
                  size="sm"
                  class="text-white"
                  v-bind:disabled="itemCount === 0">
            <i class="fa fa-shopping-cart"></i>
        </b-button>
</div>
</template>

<script>
    import {mapGetters} from "vuex";
    export default {
        name: "cart-summary",
        computed: {
            ...mapGetters({
                itemCount: "cart/itemCount",
                totalPrice: "cart/totalPrice"
            })
        }
    }
</script>

<style scoped>

</style>

第二个（总价格）-按预期工作，并返回购物车中的总价。第一个显示了一些奇怪的结果：

如果我的购物车中有3件商品，总计将显示03 如果我的购物车中有3件商品A和2件商品B总计将显示032

Answer 1

Javascript是一种非类型化的语言，喜欢强迫事物，这有时会使数学行为变得有趣。例如1 + "1" === "11"。

line.quantity可能是字符串，因此，如果尝试使用parseInt(line.quantity)，它将返回您想要的实际值。

Vuex显示错误的减少结果

1 个答案: