7 뷰 리서치

source: categories/study/vue-research/vue-research_7.md

7.1 3 ways to Persist Pinia State

  • recommended vue state management solution for vue3
    • a common use case for data stores is persist data
      • page reloads
      • user starts new session
  • 기존엔 state를 local storage에다 저장했다. persist data여야 되는 거는..
    • can access on future visits!
      • auth state
      • preferences
      • 위와 같은 정보들을 local storage에 담으면 we don't have to login every visit!
  • persistence is not built-in to pinia
  • let's see a few ways to implement it
  1. persisting an individual value
    1. save the state into local storage
    2. use saved state when our store is made
    3. create a pinia store with the composition api
      1. 링크
    4. Pinia Simplified
      1. 링크
      2. pinia features
      3. compare to vuex
        • vuex와 가장 큰 차이점은 Modular by design
        • pinia separates modules into separate stores
        • vuex는 오로지 하나의 store만 가졌다.
        • vuex
          • state
          • mutations (vue3에선 mutations가 필요 없다.)
          • actions
          • getters
        • pinia
          • state
          • actions
          • getters 2. add pinia to an app
    5. LET'S PERSIST USER!
      1. 링크
      2. Watch for changes to user
      3. userstore: user: val (값을 userstore에 넣고 persist 시킬거야!)
      4. check localStorage when creating
      5. persist a whole store on entire pinia state
        1. 그냥 직접 localStorage에 저장하는 방식 (main.ts파일에..)
        2. @vueuse/core 라이브러리의 useLocalStorage 을 사용하는 방식
        3. pinia-plugin-persistedstate 라이브러리를 사용하는 방식

npm init vite



npm i pinia