Vue3-45-Pinia-定义全局状态的两种方式

本文介绍了Pinia在Vue中的作用,强调了全局状态(state)、getters和actions的概念,以及如何通过OptionStore和SetupStore方式来定义和管理这些全局状态。
摘要由CSDN通过智能技术生成

Pinia 的作用介绍

Pinia 是管理 全局状态的工具。
全局状态
我的理解,就是一个全局的变量,在项目内,所有的组件都可以使用它,对它进行读写操作。

全局状态的三个核心概念

state : 最核心的,就是变量的定义;

getters : 类似于组件的【计算属性】,是对 state 的修饰函数;

actions : 类似于组件的 【方法】,可以对 state 进行逻辑处理;

简单理解 : 
state 是定义全局状态的地方;
getters 是读取全局状态的地方;
actions 是操作全局状态的地方。

getters 和 actions 可以没有;
但是 state 必须有!!!

<

Vue 3中,`pinia-plugin-persistedstate`是一个用于持久化状态的Pinia插件,它允许你在用户关闭和重新打开应用时保存和恢复数据。关于设置Pinia状态的时效,你需要明确你是指的状态持久化的时间范围,例如: 1. **默认保存间隔**:这个插件通常会自动保存状态到浏览器的localStorage或 sessionStorage中。默认情况下,Pinia-PersistedState可能没有特定的保存间隔,但你可以通过配置自定义保存策略。 2. **手动触发保存**:你可以选择在特定场景(如组件卸载或页面刷新前)调用保存方法,这可以让你控制保存的时机。 3. **失效时间**:对于敏感信息,你可能希望设置一个过期时间,超过这个时间后数据会被清除。这通常不是由Pinia-PersistedState直接处理,而是通过在存储选项中设置`maxAge`属性来实现,然后在加载数据时检查是否已过期。 为了具体设置pinia状态的时效,你需要在配置插件时进行以下操作: ```javascript import { createApp } from 'vue'; import { useStore } from '@pinia/core'; import { persistedState } from 'pinia-plugin-persistedstate'; const store = defineStore('myStore', { // ...定义你的状态方法 }); // 使用 persistedState 插件 createApp({ // ...其他配置 }) .use(store) .use(persistedState, { key: 'myStore', // 存储的键名 // 可选的保存策略,如自动保存间隔、过期时间等 // 例如: // localStorage: { maxAge: 24 * 60 * 60 * 1000 }, // 一天后数据过期 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值