본문 바로가기

개발하자

svelt 스토어 내에서 반응성 $ 변수를 참조하는 방법은 무엇입니까?

반응형

svelt 스토어 내에서 반응성 $ 변수를 참조하는 방법은 무엇입니까?

브리핑할게요.

사용자가 장바구니에 제품을 추가할 때마다 업데이트되는 반응 변수가 있습니다.

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

이제 다른 구성 요소의 아이콘에 카트 항목의 길이를 넣으려고 합니다. 그래서 저는 그것을 만들고 나머지 구성 요소들과 공유하려고 노력했습니다.

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

카트 항목 구성 요소에 있습니다. 스토어를 구성 요소로 가져온 후 업데이트하려고 했습니다:

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

그러나 매번 내 개발 도구에 정의되지 않은 것으로 표시됩니다. $cartLength {$cartLength}을(를) 시도했는데, 질문이 있는데, 스토어 업데이트 기능 내의 값에 cartLength 변수를 어떻게 할당합니까?




쓰기 가능한 저장소의 업데이트 기능은 저장소에 설정할 반환 값을 가져야 합니다.

https://svelte.dev/svelte#tml

// 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;



스토어 내에서 스토어 변수를 지우고 싶었지만 스토어 변수 'sessionData'에 직접 액세스하거나 '$sessionData'를 사용할 수 없어서(.js 파일을 사용했기 때문에) 변수를 만들고 어레이 변수를 지우기 위해 액세스했습니다.

<sessionData.js>

import { writable, get } from 'svelte/store';

export let sessionData = writable(
   { Record: { ID: "foo",  Name: "bar"}});

export const clearData = () => {
   let poSession = get(sessionData)
   poSession.Record.ID = "";
   poSession.Record.Name = "";
}

당신의 경우, 당신은 할 수 있다 (만약 당신이 당신의 가게를 유지하기 위해 자바스크립트 파일을 사용한다면) -

<cartitems.js>

export const setData = (cartLength) => {
    let poCartLength = get(cartItemsLength)
    poCartLength = cartLength;
}

반응형