首页 > 其他分享 >pinia持久化存储(pinia-plugin-persistedstate)

pinia持久化存储(pinia-plugin-persistedstate)

时间:2024-07-29 11:28:34浏览次数:15  
标签:const defineStore plugin pinia persistedstate import

快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)

安装

pnpm

pnpm add pinia-plugin-persistedstate

npm

npm i pinia-plugin-persistedstate

yarn

yarn add pinia-plugin-persistedstate

将插件添加到 pinia 实例上

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

用法

创建 Store 时,将 persist 选项设置为 true

选项式语法

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

组合式语法

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

现在,你的整个 Store 将使用默认持久化配置保存。

标签:const,defineStore,plugin,pinia,persistedstate,import
From: https://blog.csdn.net/H2608520347/article/details/140766712

相关文章

  • Vuex和Pinia详解
    Vuex基础知识Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的核心构成要素包括:State(状态):存储应用的状态。Getter(获取器):从状态中派生出状态。Mutation(突变):同步地更......
  • Pag动画:umi+libpag+copy-webpack-plugin实现及问题解决
    1、package.json添加如下,安装依赖:"libpag":"^4.2.84","copy-webpack-plugin":"9.1.0",为什么是写死的旧版本,后面解释2、使用的方法,这里只是一个小示例,具体如何使用看个人(这里主要是想记录过程中出现的问题及解决方式): constinit=async()=>{   constPag......
  • Nuxt3的plugins使用有哪些?
    Nuxt3是一个服务端渲染(ssr)框架在项目中,(1)有一些全局使用方法,不想每次使用都要单独导入,而不想像平时的框架项目,总是要export,然后频繁的import,现在nuxt3可以用plugins的provide注入全局方法,但是其实不同于Vue的provide  Nuxt的provide:可注入全局方法,解决全局方法多处导......
  • 无法解析插件 org.apache.maven.plugins:maven-war-plugin:3.2.3(已解决)
    文章目录1、问题出现的背景2、解决方法1、问题出现的背景最开始我想把springboot项目转为javaweb项目,然后我点击下面这个插件就转为javaweb项目了,但是我后悔了,想要还原成springboot项目,点开项目结构关于web的都移除了,还是不行,控制台报下面的错误无法解析插件org.......
  • Vue3-WebOS网页版os系统|vite5+pinia2+arco-design仿macOS桌面os管理
    原创Vue3+Pinia2+ArcoDesign仿macOS桌面网页版os管理系统ViteMacOS。vite5-vue3-macos基于最新前端技术vite5.x+vue3+pinia2+arco.design+sortablejs+echarts构建网页版osx后台管理系统新解决方案。支持windows+macos两种桌面模式、自定义桌面栅格布局引擎、可拖拽式桌面菜单/程......
  • Vue全家桶 - pinia 的理解和学习1(Pinia 核心概念的 Store、State、Getter、Action)
    Pinia(Vue的专属状态管理库)Pinia和Vuex的区别设计理念和架构Vuex采用集中式架构,所有状态存储在一个全局状态树中,通过mutations和actions来修改和处理状态。Pinia采用去中心化的架构,每个模块有自己的状态,这使得Pinia在代码分割和模块化方面更加灵活。TypeSc......
  • 自动导入unplugin-auto-import+unplugin-vue-components
    文章介绍接下来将会以Vite+Vue3+TS的项目来举例实现在我们进行项目开发时,无论是声明响应式数据使用的ref、reactive,或是各种生命周期,又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用:import{ref,reactive,onMounted,watch,provid......
  • 创建SpringBoot项目时出现Cannot resolve plugin org.springframework的解决方法 原
    创建SpringBoot项目时出现Cannotresolvepluginorg.springframework的解决方法原因是添加依赖时未添加版本号原因是添加依赖时未添加版本号解决方法:在pom.xml文件中的依赖添加版本号原来:<plugin><groupId>org.springframework.boot</groupId><a......
  • Vuex 和 Pinia两种状态管理工具,该选择哪一个呢?
    文章目录1,Vuex2,Pinia3,计数器应用3.1,使用Vuex3.2,使用Pinia4,结论当项目逐渐变大时,状态管理的问题开始显现了出来。这时,两个强大的状态管理工具:Vuex和Pinia。该选择哪一个呢?1,VuexVuex是Vue.js的官方状态管理库。它采用集中式存储管理应用的所有组件的状态,并以......
  • 类明显存在却报 package not found, Java程序中专门被其他工程所依赖的common jar用sp
    先上官方链接:https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/maven-plugin/examples/repackage-classifier.html在使用SpringBoot构建通用JAR库时,尤其是当通springboot默认的过spring-boot-maven-plugin插件打包时。如果遇到了类存在但报“packagenotfound......