什么是Pinia持久化和模块化？

1、什么是Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

详细看官网：pinia.web3doc.top/

2、什么是持久化存储？

持久化是将程序数据在持久状态和瞬时状态间转换的机制。

通俗：页面刷新，数据不清零

3、什么是模块化管理？

通过构建多个存储模块，可以让程序自动拆分它们，非常轻巧，轻松写出优雅的存储。

通俗：拆分模块，方便管理，看着好看

（1）安装

//控制台
yarn add pinia
yarn add pinia-plugin-persistedstate    

（2）具体使用
1、在main.ts 中引入并挂载到根实例

import { createSSRApp } from 'vue'
import pinia from './stores'
 
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
 
  app.use(pinia)
  return {
    app,
  }
}

2、在src/stores/index.ts中

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
 
// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)
 
// 默认导出，给 main.ts 使用
export default pinia
 
// 模块统一导出
export * from './modules/member'
在src/stores/modules/xxxx.ts中
import type { LoginResult } from '@/types/member'
import { defineStore } from 'pinia'
import { ref } from 'vue'
 
// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<LoginResult>()
 
    // 保存会员信息，登录时使用
    const setProfile = (val: LoginResult) => {
      profile.value = val
    }
 
    // 清理会员信息，退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }
 
    // 记得 return
    return { profile, setProfile, clearProfile }
  },
)

3、在页面中使用

<script setup lang="ts">
import { useMemberStore } from '@/stores';
 
 
// 获取会员信息
const memberStore = useMemberStore()
console.log(memberStore.profile);
 
</script>