[svelte] store 노트

기록을 안해두니 소스코드 히스토리 뒤지고 구글링 다시하고 난리나서 작성해둔다. ㅠㅠ
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>