持久化 pinia 状态

news2025/1/20 1:54:57

pinia的状态与vuex一样把数据存在内存中,在刷新页面后会清理内存,数据会丢失。

要解决这个问题非常简单,在状态改变时将其同步到浏览器的存储中,如 cookielocalStoragesessionStorage 。

可以搭配 pinia-persistedstate-plugin  插件来实现持久化,原理也是把数据存入localStorage中,只是插件会帮助自动存入与取出,不需要自己去操作localstorage 。(我使用pinia-plugin-persistedstate或者pinia-plugin-persist都无效!

pinia-persistedstate-plugin

接下来就使用 pinia-persistedstate-plugin 插件实现 pinia 状态的持久化。

  1. 安装依赖:
npm i pinia-persistedstate-plugin
  1. 引入该插件,在创建 pinia 实例时传入该插件

src/store/index.ts

import { createPinia } from "pinia"
import { createPersistedState } from 'pinia-persistedstate-plugin'
const pinia = createPinia();
pinia.use(createPersistedState())
export default pinia

main.ts:

import { createApp } from 'vue'
import store from './store/index'

const app = createApp(App)
app.use(store)
app.mount('#app')
  1. 在需要持久化状态的模块中设置 persist。咱假设 demo 模块需要对状态需要持久化,defineStore 第一个参数定义唯一的模块名,第二个参数传递 setup,其实还有第三个参数,可开启 persist

src/store/user.ts

...
const useDemoStore = defineStore('useUser', () => {
	state:()=>{
      return {
          isLogin:false,
          num:0
      }
   }
}, {
  persist: true  //可以自定义配置存储的地方,这是默认储存
})

在需要使用store的页面修改数据的时候,不要使用赋值解构取出,而是直接取出并修改。

//demo.vue
import {useUser} from '@/store/user'
const userStore = useUser() //获取store

const fn = ()=>{
  userStore.num++
}

插件帮助我们把数据存储到了localStorage 

刷新浏览器后数据也不会重置为0了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408857.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp中table表格设置宽度无效的原因及解决办法

table表格设置标题无效解决办法及原因探索 此属性并不只限于uniapp同时适用于普通表格设置文章目录table表格设置标题无效解决办法及原因探索前言一、示例二、原因三、拓展总结前言 本篇文章讲解了,实际开发中发现表格设置的宽度没有生效,无论是设置行…

css元素定位:通过元素的标签或者元素的id、class属性定位

前言 大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好理解一些。 css元素定位方式往往被忽略掉了,其实css元素定位方式也有它的价值&…

微信公众号获取openId——开发阶段

1、注册测试号 微信公众平台 2、理解获取逻辑 获得微信的openid,需要先访问微信提供的一个网址来获取code。 再访问微信提供的另一网址从而获取openId。 两个链接分别为: https://open.weixin.qq.com/connect/oauth2/authorize?appidAPPID&redire…

JavaScript 基础语法

✏️作者:银河罐头 📋系列专栏:JavaEE 🌲“种一棵树最好的时间是十年前,其次是现在” 目录JavaScript 的组成第一个程序JavaScript 的书写形式:注释输出JS 变量理解动态类型基本数据类型运算符数组创建数组访问数组元素…

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy

前言: 在前端发出Ajax请求的时候,有时候会产生跨域问题,报错如下: Access to XMLHttpRequest at http://127.0.0.1/api/post from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the…

06_HTML_表单提交的细节(submit提交按钮的使用细节)

目录一、submit提交按钮的细节二、关于输入类型(input标签)type属性中file类型(文件上传)和submit类型(提交按钮)的关系三、关于输入类型(input标签)type属性中hidden类型(隐藏域)和submit类型(提交按钮)的关系一、submit提交按钮的细节 form标签是表单标签action属性设置提交…

【js】多分支语句练习(2)

个人名片: 😊作者简介:一名大一在校生,web前端开发专业 🤡 个人主页:python学不会123 🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。 🎅**学习…

媒体查询@media

media可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则,CSS3 根据设置自适应显示。 1.使用方法: media 多媒体类型 and (条件) and (条件)... ①多媒体类型: all用于所有多媒体类型设备 print用于打印机 screen用于电脑…

2022前端笔试面试题

目录 以下为笔试题部分: 1.CSS盒子模型的构成是__,__,__,__. 2.二叉树的中序遍历顺序是badce,后续遍历顺序是bdeca,问前序遍历的顺序。 3.flex布局的父级元素中有哪些常用属性。 4.box-sizing:____;表示怪异盒模型(IE盒模型)…

JavaScript基础知识总结 14:学习JavaScript中的File API、Streams API、Web Cryptography API

目录一、Atomics和SharedArrayBuffer二、原子操作基础1、算术及位操作方法2、原子读和写3、原子交换4、原子Futex操作与加锁三、跨上下文消息四、Encoding API五、File API和Blob API1、File类型2、FileReader类型3、FileReaderSync类型4、Blob与部分读取六、Streams API1、应用…

uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)

前言 在做vue项目或者uniapp开发微信小程序时,经常会用到组件之间传值,因此想总结记录下。 一、父子传值 父向子传递:props子向父传递:通过 events($emit)父组件想调用子组件的方法:通过 thi…

Get请求报错404出现原因及解决办法

ajax中get请求时报404背景环境项目结构问题成因解决办法1解决办法2背景环境 已学习java基础,html,css,js,jquery,bootstrap,layui,maven,servlet和jsp,刚进入spring的学…

前端下载文件的几种方式

前端下载文件的几种方式 前言 实习一个人负责一个管理系统的前端部分。其中,就有前端下载文件的需要。最终采用的是使用axios发送get请求的方式,因为需要携带token。但是,不应该只注重结果,也应该注重过程,不然可能一…

jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)

写在前面 jQuery是一个快速、简洁的 JavaScript 框架,是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess,DoMore”,即倡导写更少的代码,做 更多的事情。jQuery封装了 JavaScript 常用的功能代码&…

【Vue】具名插槽

要点: 具名插槽:即具有名字的插槽,在默认插槽基础上指定插槽的名字(name " ")。父组件指明放入子组件的哪个插槽 slot "footer",如果是template可以写成 v-slot : footer。 父组件中…

html中关于侧边导航栏和导航栏的编写

侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,background-color .2s;}.box:hover{background-color: #004FCB;width: 200px;cursor: pointer;}.a1{position: fixed;right: 40px;top: 200px;float: right;}</st…

如何搭建一个vue项目(完整步骤)

如何搭建一个vue项目(完整步骤) 一、环境准备 1、安装node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功&#xff08;最新的以官网为准&#xff09; 3、为了…

vue环境搭建

前言&#xff1a;1、首先安装nodejs2、其次安装vue-cli&#xff0c;配置vue环境变量3、再次安装webpack、webpack-cli一、NodeJs安装 1、nodejs下载地址&#xff1a;https://nodejs.org/ 2、验证是否安装成功&#xff08;安装时已经自动加入到环境变量的path中&#xff09; 以…

Referer和Referrer Policy以及图片防盗链

​ Referer Referer请求头包含了当前请求页面的来源页面的地址&#xff0c;即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer&#xff08;注&#xff1a;正确英语拼写应该是referrer&#xff0c;由于早期HTTP规范的拼写错误&#xff0c;为了保持向后兼容…

html 简单表格制作(看了它足以应对大部分表格)

目录 基础表格 进阶表格 锦上添花表格 bgcolor background align frame元素 基础表格 首先制作一个表格我们要知道一张简单表格就是由二部分组成分别是表头&#xff0c;表身。 下面就是一个简单的表格。 表头就是黑体加粗的内容&#xff0c;表身就是表格主要表达的内容。…