vue3+ts pinia存储及持久化

index.ts
需要安装pinia-plugin-persist

npm  i   pinia-plugin-persist  -S

import  {
    
     createPinia}  from  "pinia"
// 引入批量的pinia持久存储插件
import  piniaPluginPersist from 'pinia-plugin-persist'
const  store=createPinia();
store.use(piniaPluginPersist)
export default store;

user.ts

 import  {
    
    defineStore}  from  "pinia"
 
export  const  useStore=defineStore('storeId',
{
    
    
    state:()=>{
    
    
        return{
    
    
            name:"zhangsan",
            num:0,
            age:20
        }
    },
    getters:{
    
    
        changeNum(){
    
    
            console.log("getters");
            return  this.num+1000;
        }
    },
    actions:{
    
    
        upNum(val){
    
    
            this.num+=val;
        }
    },
    // 开启数据缓存
    persist:{
    
    
        enabled:true,
        strategies:[{
    
    
            key:'my_user',
            storage:localStorage,
            paths:["age"]
        }]
    }
})

main.ts:

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import  router  from "./router"
// import store from "./store"
import store from "./piniaStore"
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app')

在页面中使用：

<template>
  <div>name: {
    
    {
    
     name }} <br />num: {
    
    {
    
     num }}</div>
  <p>changeNum:{
    
    {
    
     changeNum }}</p>
  <button @click="updateName">修改姓名</button>
  <button @click="addBtn">+操作</button>
</template>

<script setup lang="ts">
import {
    
     storeToRefs } from "pinia";
import {
    
     useStore } from "@/piniaStore/user";
const store = useStore();
console.log(store);
let {
    
     num, name, changeNum } = storeToRefs(store);

const updateName = () => {
    
    
  // name.value = "李四";
  // 批量修改
  store.$patch((state) => {
    
    
    state.num++;
    state.name = "赵四";
  });
};

const addBtn = () => {
    
    
  store.upNum(200);
};
defineExpose({
    
    
  num,
  name,
  changeNum,
});
</script>

<style></style>

效果图：