【Uni-App】Vue3如何使用pinia状态管理库与持久化

安装插件

pinia-plugin-unistorage
在这里插入图片描述

引入

// main.js
import { createSSRApp } from "vue";
import * as Pinia from "pinia";
import { createUnistorage } from "pinia-plugin-unistorage";export function createApp() {const app = createSSRApp(App);const store = Pinia.createPinia();// 关键代码 👇store.use(createUnistorage());app.use(store);return {app,Pinia, // 此处必须将 Pinia 返回};
}

初始化

根目录创建store文件夹，在该文件夹内添加pinia2.ts文件，内容如下：

import {defineStore
} from "pinia";export const useStore = defineStore("pinia2", {state() {return {someState: "hello pinia",token: ''};},unistorage: true, // 开启后对 state 的数据读写都将持久化// unistorage: {// 	// 初始化恢复前触发// 	beforeRestore(ctx) {},// 	// 初始化恢复后触发// 	afterRestore(ctx) {},// 	serializer: {// 		// 序列化，默认为 JSON.stringify// 		serialize(v) {// 			return JSON.stringify(v);// 		},// 		// 反序列化，默认为 JSON.parse// 		deserialize(v) {// 			return JSON.parse(v);// 		},// 	},// 	key: "foo", // 缓存的键，默认为该 store 的 id，这里是 main,// 	paths: ["foo", "nested.data"], // 需要缓存的路径，这里设置 foo 和 nested 下的 data 会被缓存// }
});// setup 语法也支持
// export const useStore = defineStore(
//   "main",
//   () => {
//     const someState = ref("hello pinia");
//     return { someState };
//   },
//   {
//     unistorage: true, // 开启后对 state 的数据读写都将持久化
//   },
// );

页面使用

<script>import {useStore} from '@/store/pinia2.ts'const pinia2 = useStore()export default {data() {return {}},methods: {startLogin() {console.log('count--------->1', pinia2.token);pinia2.token = '接口返回的token值'console.log('count--------->2', pinia2.token);},}}
</script>