vue3中使用pinia进行数据持久化的2种方式

方式一: 1)user.js

import { defineStore } from 'pinia'
export const userStore = defineStore('user', {
  state: () => ({
    num:JSON.parse(sessionStorage.getItem('num') as string) || 0,
  }),
  actions: {
    // 持久化--设置状态
    setNum(num: any){
      this.num = num
      JSON.stringify(sessionStorage.setItem('num',num))
    }
  },
  getters: {

  },
})

2)Home.vue

<template>
    <div>
        <div @click="handleNum">数据持久化：{{ store.num }}</div>    
    </div>
</template>
<script setup lang="ts">
import { userStore } from '../store/user'
const store = userStore()

// 持久化--设置状态
const handleNum = () => {
    store.setNum(++store.num)
}
</script>

方式二: 1)user.js

import { defineStore } from 'pinia'
export const userStore = defineStore('user', {
  state: () => ({
    num:0,
  }),
  actions: {
    // 持久化--设置状态
    setNum(num: any){
      this.num = num
      JSON.stringify(sessionStorage.setItem('num',num))
    }
  },
  getters: {
     getNum (state) {
       return state.num || JSON.parse(sessionStorage.getItem('num') as string)
     }
  },
})

2)Home.vue

<template>
    <div>
        <div @click="handleNum">数据持久化：{{ store.getNum }}</div>    
    </div>
</template>
<script setup lang="ts">
import { userStore } from '../store/user'
const store = userStore()

// 持久化--设置状态
const handleNum = () => {
    store.setNum(++store.num)
}
</script>

预览：

总结：方式一中组件渲染时使用state中的状态，每次状态更新并刷新浏览器时都会持久化状态而不会丢失；方式二使用getters重新派生状态，组件渲染这个派生状态，状态更新并刷新浏览器会持久化状态而不会丢失，唯一缺点是下次状态更新时getters会取state中的初始值进行渲染而不是像方式一一样取缓存中的值进行计算；所以，上述情况综合来说方式一更优，但持久化方案具体采用哪种方式根据使用场景和state值的类型来综合判定。