vue3 pinia 状态管理 pinia-plugin-persistedstate持久化

导入  pinia  pinia-plugin-persistedstate

创建 pinia 实例  const piniaInstance = createPinia()

使用 piniaInstance.use(piniaPluginPersistedstate)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import './assets/css/global.css'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const piniaInstance = createPinia()
piniaInstance.use(piniaPluginPersistedstate)
const app = createApp(App)
app.use(piniaInstance)
app.use(ElementPlus, {
  locale: zhCn
})
app.use(ElementPlus)
app.use(store)
app.use(router)
app.mount('#app')
// 全局错误处理
app.config.errorHandler = (error) => {
  console.log(error)
}

　　

定义 pinia 处理的逻辑

import { defineStore } from 'pinia'
const usepiniaStore = defineStore('testpinia', {
  state: () => ({ count: 0, name: '小明' }),
  getters: {
    getCount (state) {
      return state.count
    }
  },
  actions: {
    increment (payload:number) {
      this.count += payload
    }
  },
  persist: {
    key: 'testpinia', // 用于引用storage中的数据
    storage: localStorage // 或 sessionStorage，根据需要选择
    // 可以添加其他配置选项，如 blacklist 或 whitelist 来指定需要持久化或不需要持久化的状态
  }
})
export default usepiniaStore

　　

调用 

<template>
  <div>
    <h2>读取count</h2>
    <div> {{ ccount }}</div>
<el-button type="warning" @click="incrementClick">点击调用pinia action方法</el-button>
  </div>
</template>

<script setup lang="ts">
import usepiniaStore from '@/store/testpinia/testpinia'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
const store = usepiniaStore()
const { count, name } = storeToRefs(store)

const incrementClick = () => {
  store.increment(1)
}
const ccount = computed(() => store.count)
</script>

<style lang="scss" scoped>

</style>