반응형
svelt 스토어 내에서 반응성 $ 변수를 참조하는 방법은 무엇입니까?
브리핑할게요.
사용자가 장바구니에 제품을 추가할 때마다 업데이트되는 반응 변수가 있습니다.
let cartItems = []
$: cartLength = cartitems.length;
이제 다른 구성 요소의 아이콘에 카트 항목의 길이를 넣으려고 합니다. 그래서 저는 그것을 만들고 나머지 구성 요소들과 공유하려고 노력했습니다.
import { writable } from 'svelte/store';
export const cartItemsLength = writable("");
카트 항목 구성 요소에 있습니다. 스토어를 구성 요소로 가져온 후 업데이트하려고 했습니다:
cartItemsLength.update(value=>{
value = cartLength
})
그러나 매번 내 개발 도구에 정의되지 않은 것으로 표시됩니다. $cartLength {$cartLength}을(를) 시도했는데, 질문이 있는데, 스토어 업데이트 기능 내의 값에 cartLength 변수를 어떻게 할당합니까?
쓰기 가능한 저장소의 업데이트 기능은 저장소에 설정할 반환 값을 가져야 합니다.
// 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;
}
반응형
'개발하자' 카테고리의 다른 글
주피터 서버가 충돌했습니다. 연결할 수 없습니다. 주피터의 오류 코드: 1" (0) | 2023.03.22 |
---|---|
다음의 Typescript 파일 이후 Vercel에서 빌드 오류가 발생했습니다.JS 이름 변경 (0) | 2023.03.21 |
펄럭임/안드로이드: [...] 활동이 있지만 'android:exported' 속성이 없는 APK를 업로드했습니다. exported="true"가 작동하지 않음 (0) | 2023.03.20 |
플러터에 있는 연산자 == 방법은 무엇입니까? (0) | 2023.03.20 |
Jupyter/Jupyter Lab 노트북에 목차를 추가하려면 어떻게 해야 합니까? (0) | 2023.03.19 |