Vue调用Vuex store数据时cart、cartItems属性未定义报错如何解决

错误根因 #

两个报错都是因为pages/cart.vue的组件配置结构写错位导致的：

• computed配置被错误嵌套进了components属性内部，Vue无法识别挂载计算属性到实例上
• 模板中使用的cart变量没有对应计算属性，你用mapGetters映射的是totalSum，没有做别名映射
• cartItems计算属性没有放到computed配置块里，同样没有被实例挂载

修复步骤 #

1. 修正pages/cart.vue的script配置 #

将错位的配置归位，对齐模板使用的变量名：

<script>
import CartItem from '../components/CartItem'
import { mapGetters } from 'vuex'
export default {
  components: {
    CartItem
  },
  computed: {
    // 给totalSum起别名cart，对应模板里的{{ cart }}
    ...mapGetters('cart', { cart: 'totalSum' }),
    // 将cartItems移到computed内部
    cartItems(){
      return this.$store.getters['cart/products'];
    }
  }
}
</script>

2. 修正字段不匹配的隐藏问题 #

你store的cart模块中，购物车商品存的标题字段是title，但cart.vue模板里传给CartItem的:name="item.name"拿不到值，需要修改模板传参：

<CartItem
  v-for="item in cartItems"
  :key="item.productId"
  :prod-id="item.productId"
  <!-- 把item.name改成item.title -->
  :name="item.title"
  :image="item.image"
  :price="item.price"
  :qty="item.qty"
></CartItem>

验证 #

修改后重启项目，模板中访问的cart和cartItems就会正确挂载到实例上，报错消失，购物车数据可以正常渲染。

内容的提问来源于stack exchange，提问作者stormm