Vue3 Pinia持久化存储

hykeda4年前Vue4147

一、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

相关文章

vite.config.js配置@

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path f...

useRoute,userRouter的用法

 import { useRoute, useRouter } from 'vue-router'; 这里的useRoute是获取传递的变量:const route...

页面直接使用ElementUI,官方提供的表格代码,样式错乱

页面直接使用ElementUI,官方提供的表格代码,样式错乱

在使用element编写前端代码是,引入element的css和js,使用官方提供的例子:<template>   <el-table :data=&...

npm简介

npm简介

做前端开发,如果项目达到了一定的规模,就离不开npm了。下面简单介绍一下npm的知识。1、npm的含义npm,Node Package Manager的缩写,也就是“节点的包管理器”。顾名思义,npm...

vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别

最近在开发vue3时,定义了一个变量:let form = reactive({});form = res.items;这里我将接口获取到的数据直接赋给了form,这样我在表单中:<el-for...

vue项目上安装SCSS

原文:https://blog.csdn.net/zhouzuoluo/article/details/81010331  ① 使用vue-cli模板创建新项目:vu...

发表评论    

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