###
Vue3 使用 Pinia 实现登录
状态管理的最佳实践
在
Vue 3 开发中，Pinia 是一种轻量级的
状态管理工具，能够有效解决组件间
状态共享的问题。对于登录
状态这种全局性的需求，可以利用 Pinia 提供的功能来实现最佳实践。
#### 安装依赖
为了使用 Pinia 并支持
状态持久化，在项目中需先安装必要的依赖包：
```bash
npm install pinia @pinia-plugin-persistedstate
```
上述命令会分别安装 Pinia 及其用于
状态持久化的插件 `@pinia-plugin-persistedstate`[^2]。
---
#### 创建 Store 文件结构
通常会在项目的 `src/stores/` 路径下定义所有的 store 文件夹及其对应的文件。例如：
```javascript
// src/stores/user.js
import { defineStore } from 'pinia';
import { useLocalStorage } from '@
vueuse/core'; // 如果需要额外的本地存储辅助函数
export const useUserStore = defineStore('user', {
state: () => ({
token: null, // 登录令牌
user: null, // 用户信息对象
}),
getters: {
isLoggedIn: (state) => !!state.token,
currentUser: (state) => state.user,
},
actions: {
setLogin(token, userInfo) {
this.token = token;
this.user = userInfo; // 设置用户信息
},
logout() {
this.token = null;
this.user = null; // 清除用户信息
},
},
});
```
此代码片段展示了如何通过 `defineStore` 方法创建一个名为 `'user'` 的 store，并初始化其中的
状态字段 `token` 和 `user`。同时提供了两个 getter 函数 `isLoggedIn` 和 `currentUser` 来判断当前用户的登录
状态和获取用户详情[^1]。
---
#### 配置
状态持久化
为了让登录
状态能够在页面刷新后仍然保持一致，可以通过配置 `persist` 属性启用
状态持久化功能：
```javascript
// 修改后的 stores/user.js
import { defineStore } from 'pinia';
import persistPlugin from 'pinia-plugin-persistedstate';
const usePersistState = {
key: 'auth',
storage: localStorage, // 或者 sessionStorage
};
export const useUserStore = defineStore(
'user',
{
state: () => ({
token: null,
user: null,
}),
getters: {
isLoggedIn: (state) => !!state.token,
currentUser: (state) => state.user,
},
actions: {
setLogin(token, userInfo) {
this.token = token;
this.user = userInfo;
},
logout() {
this.token = null;
this.user = null;
},
},
},
{ plugins: [persistPlugin(usePersistState)] }
);
```
这里引入了 `pinia-plugin-persistedstate` 插件并将其应用到 store 上，从而实现了基于浏览器缓存的
状态持久化。
---
#### 组件内的调用方式
在任何
Vue 组件内部都可以轻松访问该 store 数据并与之交互：
```html
<template>
<div v-if="!isAuthenticated">
<!-- 显示未认证界面 -->
<button @click="handleLogin">登录</button>
</div>
<div v-else>
<!-- 已经
登陆成功 -->
欢迎回来 {{ username }} !
<button @click="logoutAction">退出登录</button>
</div>
</template>
<script setup>
import { computed } from '
vue';
import { useRouter } from '
vue-router';
import { useUserStore } from '@/stores/user';
const router = useRouter();
const userStore = useUserStore();
const isAuthenticated = computed(() => userStore.isLoggedIn); // 判断
是否已登录
const username = computed(() => userStore.currentUser?.name || ''); // 获取用户名字
function handleLogin() {
// 假设这是模拟登录逻辑
const mockToken = 'abc123xyz';
const mockUserInfo = { name: 'John Doe' };
userStore.setLogin(mockToken, mockUserInfo);
alert('登录成功！');
}
function logoutAction() {
userStore.logout(); // 执行登出操作
router.push('/login'); // 返回至登录页
}
</script>
```
以上模板演示了一个简单的登录按钮切换机制，当点击 “登录” 后触发 `setLogin()` 动作更新 store；而点击 “退出登录” 将清除所有相关数据并通过路由跳转回初始位置。
---
### 总结
借助 Pinia 的强大能力，开发者可以在
Vue 3 应用程序中优雅地处理复杂的跨组件通信问题，特别是像用户身份验证这样的场景更是得心应手。结合恰当的
状态持久化策略，则可进一步提升用户体验的一致性和便利度。
本文介绍了在Vue应用中如何保存登录状态，包括使用Session Storage保存用户信息，利用Vuex状态管理库进行储存，以及结合Session和Vuex的使用方式。在登录成功后，通过路由传递登录信息，但这种方式安全性较低。通过Session Storage可以安全地存储数据，而Vuex则提供了更复杂的state管理，即使刷新页面，通过插件也能保持状态。
扫一扫
3021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
