[vue3-pinia] 03. 기타

이번 post에서는 pinia의 부가적인 기능들에 대해 살펴보자.

 

내장 함수들

 

$subscribe

watch와 유사하게 store의 $subscribe 함수를 이용하면 state의 상태 변화를 모니터링할 수 있다. $subscribe의 콜백 함수에는 mutation과 state 객체가 전달되는데 mutation에는 변경에 대한 상세한 정보가 추가된다.

todoStore.$subscribe((mutation, state) => {
    console.log("변경됨: ", state);
    console.log(`mutation type: ${mutation.type}`);        // direct | patch object | patch function
    console.log(`mutation storeId: ${mutation.storeId}`);
    console.log(`mutation payload: ${mutation.payload}`);  // patch object일 경우 $patch에 전달된 객체
});

상세한 내용을 볼 수 있다는 점 외에도 watch와의 차이점은 동시에 여러 번의 patch 가 진행되는 경우 $subscribe는 매번 변경을 감지하지만 watch는 한 번만 감지한다. 

따라서 store의 상태를 localstorage에 저장한다고 할 때 건별로 저장할 거냐 아니냐에 따라서 $subscribe에서 할 수도 있고 watch에서 할 수도 있다.

watch(todoStore, 
     (newState) => localStorage.setItem(todoStore.$id, JSON.stringify(newState)), 
     {deep: true}
)

 

$reset

필요하다면 state를 최초 상태로 reset 시킬 수 있는데 options 형태로 사용하는 경우는 $reset() 함수가 내장돼서 호출만 하면 된다. 하지만 composition 형태는 $reset()이 바인딩되지 않았기 때문에 직접 store에서 작성해주어야 한다. 결국은 굳이 $reset일 필요는 없지만 일관성을 위해서 $reset이라고 함수를 추가해 주자.

export const useTodoStore = defineStore('todo', () => {
  . . .

  const $reset = () => {
    nextId = 1
    todos.splice(0, todos.length)
  }
  return {todos, todoStatus, $reset }
})