svelte - 在浏览器中更改选项卡时访问存储在 Svelte 存储中的数据

Question

我对 Svelte 比较陌生，并且使用我在网上找到的一些代码来创建一个简单的购物车。

我的问题： 在浏览器中更改选项卡时，我无法使用存储在 Svelte 商店中的数据。

详细说明： 运行我的演示时，我能够成功地将商店中的商品添加到名为 的数组cart中，我可以将其存储在名为 的 Svelte 商店中cartcontents。我可以cart通过单击 UI 中的加号或减号来调整存储的项目 - 更改会反映回我的cartcontents商店。

但是，如果我将选项卡从购物车切换到另一个选项卡，然后再切换回来，我会得到一个空的购物车并NaN显示总计（计算值）。

这是我的组件（称为Shop.svelte）的脚本块中的内容：

<script>
  export let location;

  import { Router, Link, Route } from "svelte-routing";
  import { writable, get } from "svelte/store";
  import { counter, cartcontents } from "../stores.js";  
  import productlisting from "../productlisting.js";

  let cart = [];

  cart = $cartcontents;

  console.log("CART", cart)   <!----- THIS SHOWS CORRECT DETAILS
 
  let totalcount = 0;

  let products = productlisting;
  
  const addToCart = (product) => {
    for(let item of cart) {
      if(item.id === product.id) {
        product.quantity += 1
        cart = cart;
        return;
      }
    }
    cart = [...cart, product];
    counter.update(n => n + 1);
    cartcontents.update(n => [cart]);
  }
  
  const minusItem = (product) => {
    for(let item of cart) {
      if(item.id === product.id) {
        product.quantity -= 1
        counter.update(n => n - 1);
        cartcontents.update(n => [...n, cart]);  
        cart = cart;
        return;
      }
    }
    cart = [...cart, product]
  }
  
  const plusItem = (product) => {
    for(let item of cart) {
      if(item.id === product.id) {
        product.quantity += 1  
        counter.update(n => n + 1); 
        cartcontents.update(n => [...n, cart]);            
        cart = cart;
        return;
      }
    }
    cart = [...cart, product]      
  }

  $: total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
</script>

这是我的组件中的 HTML 标记：

<div class="product-list">
  {#each products as product}
  <div>
    <div class="image" style="background-image: url({product.image})"></div>
    <a href="/product/{product.id}"><h4>{product.name}</h4></a>
    <p class="money">
      ${product.price}
      <button on:click={() => addToCart(product)}>Add to cart</button>
    </p>
  </div>
  {/each}
</div>

{#if $counter > 0} 
  <div>
    <div class="cart-list">
      <h2>Cart</h2>    
      {#each cart as item }   <!--- THIS IS WHERE I'M EXPECTING ITEMS TO APPEAR WHEN SWITCHING BACK - EVEN WITH ITEMS IN, IT THROWS AN ERROR -->
        {#if item.quantity > 0}
          <div class="cart-item">
            <img width="50" src={item.image} alt={item.name}/>
            <div>{item.quantity}
              <button on:click={() => minusItem(item)}>-</button>
              <button on:click={() => plusItem(item)}>+</button>
            </div>
            <p class="money">${item.price * item.quantity}</p>
          </div>
        {/if}
      {/each}
    </div>
    <div class="total">
      <h4>Total: $ {total}</h4>
      <button>Checkout and Pay</button>
    </div>
  </div>
{:else}
  <div id="cart">
    <h2>Cart</h2>
    <span>There are no products in your cart</span>
  </div>
{/if}

我已经在 SO 上的此链接中看到了答案，并尝试将代码更改为使用cart = get($cartcontents);or cartcontents.subscribe();，但 get store.subscribe is not a functionor$cartcontents.subscribe不是函数。

我的目标是cart初始化为一个空数组，或者使用来自 的产品cartcontents，这取决于它cartcontents是空的还是有一个产品数组。

我不确定我做错了什么 - 任何人都可以帮忙吗？

标签： svelte