uniapp 使用pinia进行持久化存储

起步: uniapp官方的使用pinia流程
在创建完pinia数据后,我们需要使用第三方库进行持久化存储
这里使用的是pinia-plugin-persistedstate: pinia-plugin-persistedstate

安装

  • npm
npm i pinia-plugin-persistedstate
  • pnpm
pnpm i pinia-plugin-persistedstate
  • yarn
yarn i pinia-plugin-persistedstate

加入到 pinia 实例中

import * as Pinia from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = Pinia.createPinia()
pinia.use(piniaPluginPersistedstate)
export function createApp() {
  const app = createSSRApp(App)
	app.use(pinia)
  return {
    app,
	Pinia
  }
}

用法

不可使用 sessionStorage 或者是 localStorage 而是应该使用uniapp封装好的Api
否则运行多端时会报错

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  persist:{
  	storage: {
  	  getItem: uni.getStorageSync,
	  setItem: uni.setStorageSync
	}
  },
)
### 如何在 UniApp 中实现 Pinia 的状态持久化 #### 安装依赖 为了使 Pinia 支持持久化功能,在项目中需安装 `pinia-plugin-persistedstate` 插件。对于 HBuilder X 用户来说,由于该开发工具已经集成了 Pinia 库,因此只需单独添加此持久化扩展包即可完成准备工作[^1]。 ```bash npm install pinia-plugin-persistedstate ``` #### 配置 Pinia 并启用持久化支持 接下来是在项目的 stores 文件夹下创建配置文件 index.ts 来初始化并设置好 Pinia 实例及其所使用的插件: ```typescript // stores/index.ts import { createPinia } from 'pinia' import persist from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(persist) export default pinia ``` 这段代码完成了 Pinia 和其持久化能力的集成工作,并将其暴露出去以便其他地方可以方便地引用它[^2]。 #### 设置具体 Store 的持久化选项 当定义某个特定 store 时,可以通过传递额外参数来指定哪些属性应该被保存到本地存储中去。下面是一个简单的例子展示了如何操作 member 模块的数据保持机制: ```typescript // stores/modules/member.ts import { defineStore } from 'pinia' import { ref } from 'vue' export const useMemberStore = defineStore('member', () => { const user = ref({ name: '', age: '' }) return { user } }, { persist: true, // 启用全局默认持久化行为 }) ``` 通过上述方式可以在 UniApp 应用程序内轻松实现实现基于 Pinia 的状态管理方案的同时还能够确保重要数据不会因为页面刷新而丢失。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值