时间戳

首页 > 解决方案 > Vuex 显示错误的 reduce 结果

javascript - Vuex 显示错误的 reduce 结果

问题描述

我的 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)
},

他们在以下组件中显示了减少的结果

<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>

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

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

标签： javascriptvue.jsvuex

解决方案

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

这很可能line.quantity是一个字符串，所以如果你尝试parseInt(line.quantity)，它会返回你寻找的实际值。

推荐阅读