[svelte] store 노트
- Nest
- Development
- Category
- Javascript
- Hit
- 183
- Star
- 0
기록을 안해두니 소스코드 히스토리 뒤지고 구글링 다시하고 난리나서 작성해둔다. ㅠㅠsvelte store
는 대단히 유연하게 코드를 작성하고 사용할 수 있다.
custom store
커스텀 기능으로 스토어를 만들 수 있다. 자동 구독기능을 사용할 수 있게 하는 부분이 대단히 중요하다.
값을 변경하면서 중간에 특정 기능을 실행하는듯한 기능을 추가할때 유용할 것이다. (값이 변할때마다 스토리지 업데이트 하거나 history 객체 조작이나 api 통신.. 등등)
// store.js
function createKeyword()
{
const { subscribe, set, update } = writable(window.localStorage.getItem('key-name') || '')
return {
subscribe,
set: (newValue) => {
set(newValue)
},
update: (newValue => update((oldValue) => {
if (newValue === oldValue) return oldValue
window.localStorage.setItem('key-name', newValue)
return newValue
})),
customAction: () => {
console.log('call customAction()')
},
}
}
export const keyword = createKeyword()
스토어를 사용하는법은 다음과 같다.
<!-- view.svelte -->
<p>{$keyword}</p>
<script>
import { keyword } from 'store.js'
function func()
{
$keyword = 'fooo'
keyword.customAction()
}
</script>