如何在苗条的商店中引用反应式 $ 变量？

Question

我会简要介绍一下。

我有一个反应变量，每次用户将产品添加到购物车时都会更新。

let cartItems = []
$: cartLength = cartitems.length;

现在我想将购物车项目的长度放入不同组件的图标中。所以我尝试创建它并与组件的其余部分共享。

import { writable } from 'svelte/store';
export const cartItemsLength = writable("");

在我的 caritems 组件中。将商店导入我的组件后，我尝试更新商店：

cartItemsLength.update(value=>{
value =  cartLength
})

但它每次都在我的开发工具中显示未定义。我试过 $cartLength {$cartLength} 那么，我的问题是，如何将 cartLength 变量分配给 store 更新函数中的值？

Answer 1

可写存储的更新函数应该有一个返回值在存储中设置。

https://svelte.dev/docs#writable

// File cartitems.svelte

import { writable } from 'svelte/store';

export const cartItemsLength = writable(0);

let cartItems = [];
$: cartLength = cartItems.length;

// 1. use store's update function
cartItemsLength.update(value=> {
  return cartLength;
});

// 2. or you can just use $store if in .svelte script
$cartItemsLength = cartLength;