Vue3 - pinia 사용시 storage 반영이 느릴 경우 해결 법

Vue3에서 pinia를 통해 상태관리를 할 경우

import { defineStore } from "pinia";

export const useTest = defineStore("test", {
  state: () => ({
  	loadingFlag: false,
    payParam: {
      price: "",
      id: "",
      grpId: "",
    },
  }),
  getters: {},
  actions: {
    setPayParam(data) {
        this.payParam.price = data.price;
        this.payParam.id = data.id;
        this.payParam.grpId = data.grpId;
    },
  },
  persist: [
    {
      paths: ["payParam"],
      storage: localStorage,
    },
  ],
});

위 의 소스에서 localstorage에 test속에 payParam의 값을 저장하는데 vue에서의 상태값은 변경이 되었으나

localstorage의 정보는 바로 변경되지 않는 경우가 발생하여 원인을 찾아보았습니다.

(새로고침시 정상 값으로 나옴)

 

원인 : Pinia는 스토어의 상태가 변경될 때 persist상태를 자동으로 저장하는데 액션 내에서 직접사용 수정 할 경우 동기화가 정상적으로 작동하지 않는경우 발생할 수 있습니다.

해결방법 : Pinia의 $patch메서드를 사용

setPayParam(data) {
  // Use $patch to update the state
  this.$patch((state) => {
    state.payParam.price = data.price;
    state.payParam.id = data.id;
    state.payParam.grpId = data.grpId;
  });
},

 

Pinia의 $patch 메서드는 상태(state)의 여러 부분을 한 번에 업데이트하거나, 복잡한 상태 변경을 단일 작업으로 적용할 수 있도록 도와주는 기능입니다. $patch는 단순히 하나의 속성을 변경하는 것 이상의 복잡한 상태 변경이 필요할 때 유용합니다.

$patch를 사용하는 이유

• 효율성: 여러 업데이트를 일괄 처리함으로써 리액티비티 시스템의 알림 횟수를 줄이고, 더 큰 애플리케이션에서 성능을 향상시킬 수 있습니다.
• 명확성: 상태의 여러 속성을 동시에 업데이트해야 할 때, $patch는 액션을 깔끔하고 체계적으로 유지하는 데 도움이 됩니다.
• 복잡한 로직: 단순한 할당 이상의 복잡한 상태 변경이 필요할 때, $patch를 통해 한 번에 논리를 적용할 수 있습니다.

 

- 예시

$patch를 사용하지 않는 경우, 각 상태 속성을 개별적으로 업데이트해야 합니다:

this.someProperty = newValue; 
this.anotherProperty = anotherValue;

 

$patch를 사용하면 이러한 업데이트를 한 번에 처리할 수 있습니다:

this.$patch({ 
  someProperty: newValue, 
  anotherProperty: anotherValue 
});
또는 함수를 사용할 수도 있습니다:
this.$patch((state) => { 
  state.someProperty = newValue; 
  state.anotherProperty = anotherValue; 
});