将项目对象从 vue 组合 API 添加到数组

Question

我正在尝试ref使用vue-composition API. 但是，我不知道为什么这些项目没有添加到数组中。也许我以错误的方式使用了扩展运算符，或者我的实现是错误的但没有添加项目。

vue-composition 方法位于不同的文件中，并在整个组件中使用。

我以这种方式将道具传递给产品组件：

 <product
    :id="12345667"
    title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
    price="14.59"
    :rating="4"
    image="https://images-na.ssl-images-amazon.com/images/I/41Yo4bc2uiL._AC_US160_.jpg"
  >
  </product>

同样，产品组件setup如下：

   <template>

    <div class="product">
          <button type="button" @click="addToCart(item)">Add to Basket</button>
    </div>

   </template>

   <script>
    import { useCart } from "../js/ShoppingCart";
    
    export default {
      setup(props) {
        let item = props;
    
        const { addToCart } = useCart();
    
        return { item, addToCart };
      },
      props: {
        id: Number,
        title: String,
        image: String,
        price: String,
        rating: Number,
      }
    };
    </script>

ShoppingCart.js 我在哪里使用 @vue-composition-api

import { ref } from "@vue/composition-api";
export function useCart() {
  let basket = ref([]);
  const addToCart = async (item) => {
    // eslint-disable-next-line no-debugger
    debugger;
    return {
      ...basket,
      item,
    };
  };
  console.log(JSON.stringify(basket));
  return { basket, addToCart };
}

我不知道我哪里做错了，basket从不同的组件调用时数组总是空的。

更新的问题：

<template>
  <div class="home">
    <img
      class="home__image"
      src="https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2020/May/Hero/Fuji_TallHero_45M_es_US_2x._CB432534552_.jpg"
    />

    <div class="home__row">
      <product
        :id="12345667"
        title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
        price="14.59"
        :rating="4"
        image="https://images-na.ssl-images-amazon.com/images/I/41Yo4bc2uiL._AC_US160_.jpg"
      >
      </product>
      <product
        :id="12345667"
        title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
        price="14.59"
        :rating="4"
        image="https://images-na.ssl-images-amazon.com/images/I/41Yo4bc2uiL._AC_US160_.jpg"
      >
      </product>
      {{ basket }}
      basket length {{ basket.value ? basket.value.length : 0 }}
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import Product from "@/components/Product.vue";
import { useCart } from "../js/ShoppingCart";
export default {
  setup() {
    const { basket } = useCart();
    return { basket };
  },

  name: "Home",
  components: {
    Product,
  },
};
</script>

Answer 1

我没有看到您实际更新basket阵列的任何地方。

此外，您没有捕获返回的值，因此您可以将其删除，并且您可能不需要async函数

你应该可以使用 basket.value.push(item);

购物车.js

import { ref } from "@vue/composition-api";
export function useCart() {
  let basket = ref([]);
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

或者basket.push(item);如果切换ref为reactive

购物车.js

import { reactive } from "@vue/composition-api";
export function useCart() {
  let basket = reactive([]);
  const addToCart = (item) => {
    basket.push(item);
  };
  return { basket, addToCart };
}

更新 #1：

在您使用的模板中 {{ basket.value ? basket.value.length : 0 }}

一个问题是value通过模板解决的，所以你不应该在模板中使用它。

更新#2：

看起来您正尝试useCart用作全球商店。它不起作用的原因是您每次实例化时都在创建一个新商店useCart

如果您像这样运行它，它将创建一个新实例：

import { ref } from "@vue/composition-api";
export function useCart() {
  let basket = ref([]); // <--- new store, local to function
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

但如果你更新到这个

import { ref } from "@vue/composition-api";
let basket = ref([]); // <--- same store, global
export function useCart() {
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

useCart() 现在将重用相同的参考

更新 #3：

尚未测试，但您也可以尝试使用此方法来解决 Vue2 中的错误

import { ref, isRef } from "@vue/composition-api";
let basket;
export function useCart() {
  if (! isRef(basket)) basket = ref([]);
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}