在pinia的persist 中添加多对持久化处理的对象,可采用数组格式

persist 可接受对象,多个值的话也可以接受数组对象;

下面是个例子:

import { defineStore } from 'pinia'

export const useLoginStore = defineStore(
  'login',
  () => {
    const loginUser = ref<any>({})
    const isFirstDownTemplate = ref<boolean>(false)

    const setLoginUser = (payload: any) => {
      loginUser.value = payload
    }

    const setIsFirstDownload = (params:boolean) => {
      isFirstDownTemplate.value = params
    }

    function $reset() {
      loginUser.value = {}
      isFirstDownTemplate.value = false
    }

    return { loginUser, setLoginUser, $reset, isFirstDownTemplate, setIsFirstDownload }
  },
  {
    persist: [
      {
        // 第一个持久化处理对象
        key: 'loginStates',
        paths: ['loginUser'],
      },
      {
        // 第二个持久化处理对象
        key: 'firstDownloadState',
        paths: ['isFirstDownTemplate'],
      },
    ],
  }
)

$reset 方法用于重置 loginUser 和 isFirstDownTemplate 的值,将它们分别设置为初始值。

最后,在 return 语句中,将需要暴露给外部的状态和方法进行返回,以便在组件中使用。这样,其他组件可以通过 useLoginStore 来访问和修改 loginUser、isFirstDownTemplate,以及调用 setLoginUser、setIsFirstDownload、$reset 方法。

在 store 的配置对象中,persist 属性用于持久化 store 的部分状态。在上述代码中,存储在 loginUser 中的状态被指定为需要持久化的部分。可以选择使用 localStorage 或其他合适的存储方式,并通过设置 storage 属性进行配置。

Pinia 是一个 Vue 3 的状态管理库,它提供了一个插件 pinia-plugin-persist 来实现数据的持久化存储。pinia-plugin-persist 可以将 Pinia 的状态存储在浏览器的 localStorage 或者 sessionStorage 中,以便在刷新页面或者重新打开浏览器时仍然可以保留状态。 以下是使用 pinia-plugin-persist 实现数据持久化的示例代码: 1. 安装 piniapinia-plugin-persist: ```shell npm install pinia pinia-plugin-persist ``` 2. 在 main.js 中引入 piniapinia-plugin-persist,并注册插件: ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import { createPersist } from 'pinia-plugin-persist' import App from './App.vue' const pinia = createPinia() pinia.use(createPersist({ // 配置项 })) createApp(App).use(pinia).mount('#app') ``` 3. 在插件的配置项中指定要存储的状态: ```javascript pinia.use(createPersist({ // 配置项 /** 要存储的状态 */ state: { /** 要存储的状态名 */ myState: { /** 存储在 localStorage 中的键名 */ key: 'myState', /** 存储在 sessionStorage 中的键名 */ sessionKey: 'myStateSession', /** 是否启用 sessionStorage */ session: false, /** 是否启用深度监听 */ deep: true, /** 是否启用异步存储 */ async: false, /** 存储前的转换函数 */ beforePersist: (state) => state, /** 恢复后的转换函数 */ afterRestore: (state) => state, }, }, })) ``` 4. 在组件中使用 Pinia 的状态: ```javascript import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ setup() { const store = useStore() // 读取状态 const myState = store.myState // 修改状态 store.myState = 'new value' }, }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值