安装pinia

yarn add pinia

npm i pinia

安装数据持久化

yarn add pinia-plugin-persistedstate


npm i  pinia-plugin-persistedstate

mian.ts导入

import { createPinia } from 'pinia'
//数据持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

createApp(App).use(pinia).mount('#app')

分模块

//index.ts
import useNoteStore from './modules/note'
 
// 统一导出useStore方法
export default function useStore() {
  return {
    note: useNoteStore(),
  }
}

默认的pinia数据持久化的设置和按需设置

//note.ts
import { defineStore } from 'pinia'

const useNoteStore = defineStore('user', {
  state: () => {
    return {
      noteList: [],
      count: 0,
    }
  },
  //和vueX一样，带有计算属性的操作可以在getters里面定义
  getters: {},
  //vueX的同步方法在mutations，异步是在actions
  // pinia中没有mutations，包括同步和异步
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
  //全部数据持久化
  // persist: true,
  // 按需设置部分数据持久化
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'storekey',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ['count'],
  },
})
export default useNoteStore

页面使用

<template>
  <div>{{note.count}}</div>
  <van-button @click="note.increment">+++</van-button>
</template>

<script lang='ts' setup>
import { storeToRefs } from "pinia";
import useStore from "@/store/index";

const { note } = useStore();
// 使用storeToRefs可以保证解构出来的数据也是响应式的
// const { count,increment } = storeToRefs(note);
</script>