Vue3组合式API,Pinia数据持久化操作

如果你要使用pinia持久化首先你得确认你有没有进行安装pinia

npm install pinia

如果你有安装那么你就可以继续往下看

步骤一:安装一个持久化插件  

npm install pinia-plugin-persist

步骤二:在main.js文件中进行引入

// 引入 pinia-plugin-persist 插件
import piniaPersist from 'pinia-plugin-persist'

// 导入创建pinia的函数
import { createPinia } from 'pinia'

// 创建pinia插件实例
const pinia = createPinia()
// 将插件注册到pinia上
pinia.use(piniaPersist)

实操对比:

步骤三:找到你需要持久化的仓库添加持久化配置

这里是在user这个仓库将里面的数据进行持久化

当然你也可以在添加其他配置比如添加key值

### 使用 Pinia 存储 Token 的方法 在 Vue 3 中利用 Pinia 进行状态管理可以方便地处理应用中的全局数据,比如用户的认证令牌(token)。通过组合式 API 方式来定义和访问这些状态变量能够更好地适应现代 JavaScript 开发模式。 为了实现这一目标,在 `store` 文件夹下创建一个新的文件用于配置 Pinia Store。下面是一个具体的例子展示如何设置一个名为 `auth.js` 或者 `auth.ts` 的模块化仓库来进行 token 的保存: ```javascript // auth.js or auth.ts import { defineStore } from &#39;pinia&#39;; export const useAuthStore = defineStore(&#39;auth&#39;, { state: () => ({ token: localStorage.getItem(&#39;token&#39;) || null, }), actions: { setToken(newToken) { this.token = newToken; if (newToken) { localStorage.setItem(&#39;token&#39;, newToken); } else { localStorage.removeItem(&#39;token&#39;); } }, clearToken() { this.setToken(null); } }, }); ``` 上述代码片段展示了怎样初始化包含 token 属性的状态对象以及提供两个操作函数:一个是用来更新当前登录会话所使用的 token (`setToken`);另一个则是清除已存在的 token 记录(`clearToken`) [^1]。 当应用程序启动时,可以从本地存储加载现有的 token 值作为初始状态的一部分。每当调用 `setToken()` 方法更改 token 后,也会同步更新到浏览器的 LocalStorage 中以便持久化保存用户的身份验证信息。 对于组件内部而言,可以通过如下方式获取并修改该 store 实例内的属性值: ```vue <script setup> import { ref, onMounted } from &#39;vue&#39;; import { useAuthStore } from &#39;@/stores/auth&#39;; // Adjust the path as necessary. const authStore = useAuthStore(); let localToken = ref(&#39;&#39;); onMounted(() => { localToken.value = authStore.token; }); function handleLogin(responseData){ // Assuming responseData contains a valid JWT. authStore.setToken(responseData.accessToken); } </script> <template> <!-- Your template code here --> <button @click="handleLogin(mockedResponse)">Log In</button> </template> ``` 这段脚本说明了如何在一个基于组合式Vue 组件里注入之前定义好的 Auth Store 并与其交互。这里假设有一个模拟响应的数据结构 `mockedResponse` 来代表实际环境中可能接收到的服务端返回结果 。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值