从Vue合成API向数组添加项目对象

如何解决从Vue合成API向数组添加项目对象

我正在尝试使用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>

解决方法

在您实际更新basket数组的地方，我看不到任何地方。

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

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

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

ShoppingCart.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 };
}