Pinia的持久化和模块化

什么是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'
   

3. 在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 }
     },
     {
       // 配置持久化
       persist: {
         // 调整为兼容多端的API
         storage: {
           setItem(key, value) {
             uni.setStorageSync(key, value) 
           },
           getItem(key) {
             return uni.getStorageSync(key) 
           },
         },
       },
     },
   )

4. 在页面中使用

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