关于pinia的使用和持久化方式(pinia-plugin-persistedstate)

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

export function setupStore(app) {
  const pinia = createPinia()
  pinia.use(piniaPluginPersistedstate) //使用持久化存储插件
  app.use(pinia)
}

export * from './modules/user'

import {
	createSSRApp
} from "vue";
import App from "./App.vue";

/** pinia */
import { setupStore } from './store/index.js'

export function createApp() {
	const app = createSSRApp(App);
	setupStore(app); //pinia
	return {
		app,
	};
}

import { createApp } from 'vue'
import App from './App.vue'

// pinia
import { createPinia } from 'pinia'
// pinia中数据持久化
import { persistedState } from 'pinia-plugin-persistedstate'

// pinia配置
const pinia=createPinia()
pinia.use(persistedState)

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

//user.js

import { defineStore } from "pinia";

/**
 * 参数1:命名空间名称 唯一id
 * 参数2: {
     state
     getters
     actions
     persist
 }
 */
 // useUserStore: 推荐使用 use + id + Store 来命名
export const useUserStore = defineStore("User", {
  state: () => ({
    userName: "",
    age:18,
    obj:{ money:9999,house:99 },
    hobby:[
        { id: 1, name: '篮球', level: 1 },
        { id: 2, name: 'rap', level: 10 }
    ]
  }),
  getters: {
    // 类似于计算属性，参数state指向defineStore下的state
    doubleAge(state) {
      return state.age * 2;
    },
    //在getter中 使用另一个getter  this指向当前存储库
    addOneAge() {
      return this.doubleAge + 1;
    },
    //返回一个函数
    returnFunction(state) {
      return function (id) {
        return state.hobby.find((item) => item.id == id);
      };
    },
  },
  //可以通过this访问整个store实例的所有操作，支持异步操作
  actions: {
    //非异步操作
    addAge(e) {
      console.log("接受的数据", e); //e是外部调用方法传递的参数
      //方法一
      this.age = this.age + e;
      //方法二
      // this.$patch((state) => {
      //   state.age += e;
      // });
    },
    // 模拟异步
    asynchronous() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve("模拟异步返回值");
        }, 2000);
      });
    },
    // 异步操作
    async getList() {
      const res = await this.asynchronous();
      console.log(res);
    },
  },
  persist:true,
});

<template>
  <div class="content">
    <div>我叫{{ userName }},今年{{ age }}岁</div>
    <div>财富有{{ obj.money }}万元</div>
    <div>其他资产有{{ obj.house || obj.friend }}个</div>
    <div>爱好有</div>
    <div v-for="item in hobby" :key="item.id">
      <div>{{ item.name }}</div>
    </div>
    <button @click="editPiniaHandler">点击修改</button>
    <button @click="editAll">点击修改全部</button>
    <button @click="replaceAll">替换</button>
    <button @click="resetBtn">重置</button>
  </div>
</template>

<script setup>
// import { ref } from 'vue';
import { useUserStore } from '@/store/index.js' //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换

const userInfoStore = useUserStore()
// const { username, age, like, hobby } = userInfoStore //直接结构赋值 不是响应式
const { userName, age, hobby, obj } = storeToRefs(userInfoStore); // 响应式

// 一个一个修改
const editPiniaHandler = () => {
  userInfoStore.userName = "小明";
  userInfoStore.age += 1;
};

//使用$patch方法  以对象的形式一次性修改
const editAll = () => {
  userInfoStore.$patch({
    userName: "鸭蛋",
    age: 21,
  });
};

// $state  替换 state 为新对象
const replaceAll = () => {
  userInfoStore.$state = {
    userName: '狗子',
    age: '22',
    obj: { money: 10, friend: 1 },
    hobby: [
      { id: 1, name: "足球", level: 1 },
      { id: 2, name: "唱歌", level: 10 },
    ],
  }
}

// 重置state
const resetBtn = () => {
  userInfoStore.$reset()
}

</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

<!-- getter的使用 -->
<div>乘2： {{ userInfoStore.doubleAge }}</div>
<div>加一： {{ userInfoStore.addOneAge }}</div>
<div>返回一个函数查找id为1的爱好： {{ userInfoStore.returnFunction(1) }}</div>

<!-- action的使用 -->
<button @click="add">非异步</button>
<button @click="getList">异步</button>

// 调用action中的方法
const add = () => {
  userInfoStore.addAge(5)
}
//调用异步方法
const getList = () => {
  userInfoStore.getList()
}

/** 持久化使用方法1
 * 当前模块所有数据都进行持久化
 * 使用localStorage进行存储
 * 默认将id作为storage中的key
 * 使用JSON.stringify / JSON.parse进行序列化/反序列化
 */
  persist: true, 
  
  
/** 持久化使用方法2
 * key:存储名称
 * storage:存储方式
 * path:用于指定state中哪些数据需要被持久化,[]表示不持久化任何状态，undefined或null表示持久化整个state
 */
  persist: {
      key: 'piniaStore', //存储名称
      storage: sessionStorage, // 存储方式
      paths: ['userName','obj'], //指定存储的数据
  },
  
/** 持久化使用方法3*/
`userName` 值将保存在 `localStorage` 中，
`obj` 值将保存在 `sessionStorage` 中。
`age` 没有被持久化
 persist:[
    {
       pick:["userName"],
       storage:localStorage
    },
    {
       pick:["obj"],
       storage:sessionStorage
    }
 ],

// store/index.js
import { createPinia } from "pinia";
import { createPersistedState } from "pinia-plugin-persistedstate";

export function setupStore(app) {
const pinia = createPinia();
pinia.use(createPersistUni()); //使用持久化存储插件
app.use(pinia);
}

/**
* @description 自定义pinia持久化API存储方式为uni
*/
// 应用于所有模块,如在特定模块设置则写到对应模块
function createPersistUni() {
return createPersistedState({
  storage: {
    getItem: uni.getStorageSync,
    setItem: uni.setStorageSync,
  },
});
}

export * from "./modules/user";

// store/moddules/user.js
......
persist: true, // 是否开启持久化(当前模块所有数据都进行持久化)
// 配置持久化
persist: {
 pick: ["userName"],
 },

// 配置此模块的持久化存储方式
persist: {
storage: { // 修改存储方式
 getItem: uni.getStorageSync,
 setItem: uni.setStorageSync
},
key: 'userInfo', // 本地存储key值
pick: ['obj.money', 'age'] // 指定持久化的数据，不写默认持久化整个state
}