Vue3 Pinia持久化存储

hykeda4年前Vue4051

一、Pinia持久化存储

二、使用步骤

1.安装插件

代码如下(示例):

npm i pinia-plugin-persist --save

2.store/index.js

代码如下(示例):

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

3.store/user.js

代码如下(示例):

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },
  
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

4.自定义 key

数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。 这里sessionStorage和localStorage的区别 点击链接 查看详情。

代码如下(示例):

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

5.持久化局部 state

默认所有 state 都会进行缓存,你能够通过 paths 指定要长久化的字段,

其余的则不会进行长久化。

代码如下(示例):

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},
persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}


标签: Vue3Pinia

相关文章

关于uni-app 中 使用async + await 将异步请求同步化

这段时间在使用uni-app开发小程序,希望在页面加载时,获取地区数据,然后展示到页面上。一开始写在了onLoad方法上,发现页面加载时,用异步uni.request方法获取数据,当页面加载完后,异步...

vue3中defineProps传值使用ref响应式失效详解

子组件接收父组件的传参。父组件:<template> <Son :data="data"/> </template> <s...

vue3 拖拽插件 vue.draggable.next

官网地址:https://github.com/SortableJS/vue.draggable.next安装:npm i -S vuedraggable@next引入插...

vite+vue3项目中js方法调用

这这里一创建一个axios接口demo为例:首先安装axios,打开官方GitHub:https://github.com/axios/axios或者访问中文网站:https://www.axios-...

Vue2.x笔记

vue2.0 开始不能挂载到<html> 或者 <body> 上。 transition 动画过渡的时候,如果是:<transit...

前端常用的UI组件库

Arco DesignTaro UISemi DesignAnt DesignElementView DesignVantLayui-vueFusion Design1. Arco Desi...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。