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

安装插件

pinia-plugin-unistorage

引入

js 复制代码
// 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文件,内容如下:

js 复制代码
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 的数据读写都将持久化
//   },
// );

页面使用

js 复制代码
<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>

参考资料

状态管理 Pinia
uni-app vue3如何使用pinia状态管理库

相关推荐
海天胜景2 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿4 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再6 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55511 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录16 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000017 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl17 分钟前
深度剖析Kafka读写机制
前端
FogLetter18 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan19 分钟前
vscode webview 插件开发(精装篇)
前端