uniapp vue3 使用 pinia

大聪明了2025-08-17 9:29

javascript 复制代码

npm i pinia
npm install pinia pinia-plugin-persistedstate

javascript 复制代码

// main.js
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

export function createApp() {
	const app = createSSRApp(App)
	const pinia = createPinia()
	pinia.use(piniaPluginPersistedstate)
	app.use(pinia)
	return {
		app
	}
}

持久化:

javascript 复制代码

import {
	ref
} from 'vue';
import {
	defineStore
} from 'pinia';

export const useAuthStore = defineStore('auth', () => {
	const avatar = ref('');
	const mobile = ref('');
	const name = ref('');
	const token = ref('');

	const login = (userData) => {
		avatar.value = userData.avatar;
		mobile.value = userData.mobile;
		name.value = userData.name;
		token.value = userData.token;
	}

	return {
		avatar,
		mobile,
		name,
		token,
		login
	}
}, {
	persist: {
		key: 'userInfo',
		storage: {
			getItem: (key) => uni.getStorageSync(key),
			setItem: (key, value) => uni.setStorageSync(key, value),
		},
		paths: ['avatar', 'mobile', 'name', 'token'] // 明确指定要缓存的字段
	}
})

组件中使用：

javascript 复制代码

import { useAuthStore } from '@/stores/useAuthStore';

// 缓存用户登录信息
const userInfo = {
	avatar: member_head,
	mobile: member_mobile,
	name: member_name,
	token: member_token
}
const authStore = useAuthStore()
authStore.login(userInfo)