github
리액트의 Redux처럼 모든 모듈에서 접근할 수 있도록 하는 데이터가 필요하다면 Alpine.store 객체를 사용할 수 있습니다.
store.js라는 파일을 하나 만들어서 거기에 Alpine.store를 정의하고, html에서 불러와서 사용할 수 있도록 합니다.
// store.js
Alpine.store("global", {
open: false,
toggleOpen() {
this.open = !this.open;
}
});
store에는 변수와 메소드를 정의할 수 있습니다. global이라는 이름으로 store를 정의합니다.
// index.js
document.addEventListener("alpine:init", () => {
Alpine.data("test", () => ({
store: Alpine.store("global"),
toggle() {
this.store.toggleOpen();
},
}));
});
그리고 index.js에 Alpine.data를 정의하고 그 안에서 store라는 이름으로 정의한 store를 불러옵니다.
그렇게 되면 test라는 data 안에서 global store에 접근할 수 있게 됩니다.
예를 들어 저렇게 global store 안의 메소드인 toggleOpen()이라는 메소드를 실행하는 것도 가능하고
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<div x-data="test">
<button @click="toggle()" class="bg-[#0000FF]">
Expand
</button>
<span x-show="$store.global.open">
Content...
</span>
</div>
<script defer type="module" src="/src/index.js"></script>
<script defer src="/src/store.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
</body>
</html>
html 안에서 $store.global.open 으로 변수에 직접 접근하는 것도 가능합니다.
'IT > 기타' 카테고리의 다른 글
| [HTML] Gmail에서 HTML 특정 style 속성 적용되지 않는 문제 (0) | 2024.04.02 |
|---|---|
| [IT] SSR과 CSR의 차이점 (0) | 2024.03.16 |
| [Tailwind/Alpine.js] 개발환경 세팅 및 기본적인 활용 (1) | 2024.01.27 |
| [SonarQube] New Code, Overall Code란? (0) | 2023.09.01 |
| [SonarQube] 정적 분석 결과 해석하기 (0) | 2023.09.01 |