首页 > 其他分享 >vue pinia sessionstorage 数据存储不上的原因

vue pinia sessionstorage 数据存储不上的原因

时间:2023-11-16 20:56:36浏览次数:37  
标签:count stringify vue sessionstorage 不上 parse pinia

vue pinia sessionstorage 的坑

默认的配置是开始 localStorage

如果用 sessionstorage 则发现数据存储不上 ,是因为缺少了序列化和反序列化

import { parse, stringify } from 'zipson'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
},{
    {
  // 开启数据持久化
  persist: {
   storage: sessionStorage,
     serializer: {
      deserialize: parse, //JSON.parse
      serialize: stringify//JSON.stringify
    }
  }
  // ...省略
}
})

标签:count,stringify,vue,sessionstorage,不上,parse,pinia
From: https://www.cnblogs.com/qqloving/p/17837242.html

相关文章

  • Vue3 Pinia对state的订阅监听($subscribe,$onAction)数据监听
    <template><divclass="main-container":class="{'show-scroll':targetIsVisible}"><div:style="{height:frameHeight+'px'}"class="main-content":class="{'show-......
  • 【开源】基于Vue.js的计算机机房作业管理系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的计算机机房作业管理系统包含课程档案模块、课时档案模块、学生作业模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,计算机机房作业管理系统基于角色的访问控制......
  • 【开源】基于Vue.js的车险自助理赔系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的车险自助理赔系统包含车辆管理模块、车险理赔模块、理赔审核模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,车险自助理赔系统基于角色的访问控制,给车险管理......
  • vue2 项目打包后自动压缩成zip文件
    安装依赖1pnpminstallfilemanager-webpack-plugin--save-dev在vue.config.js中添加如下代码constFileManagerPlugin=require('filemanager-webpack-plugin')//引入插件1configureWebpack:{2plugins:[3newFileManagerPlugin({......
  • Cannot read properties of undefined (reading 'indexOf') at VueComponent.resetFie
    Cannotreadpropertiesofundefined(reading'indexOf')atVueComponent.resetField(index.js:1:370572) elementUI源码报错,原因竟然是form-item没加prop,折腾了一两个小时,真是服了。rules按照表单的prop来的用了那个resetfieds必须每个<el-form-item>都加prop!! ......
  • 使用js添加按钮,vue页面 el-calendar 添加自定义按钮
    html代码:<divclass="schedule"><divclass="title">今日日程</div><divclass="allSchedule"><el-rowclass="addSchedule"type="flex"align="......
  • vue2 前后端分离的项目,用宝塔部署,出现域名访问根目录能访问,加任何网址就404
    https://admin.xxx.com/ 访问正常https://admin.xxx.com/index  访问404location/{root/home/ruoyi/projects/ruoyi-ui;try_files$uri$uri//index.html;indexindex.htmlindex.htm;} nginx加上上面这段......
  • vue2和vue3ref的区别(详解)
    Vue2和Vue3中ref的区别如下:在Vue2中,ref主要用于在模板中获取DOM元素或组件实例。而在Vue3中,虽然ref也可以获取DOM元素或组件实例,但更重要的是,它还可以将一个基本类型的变量转换成响应式的数据,无需再通过复杂的步骤来访问响应式数据。另外,Vue3的ref还支持对象属性和数组索引......
  • vue获取el-table当中选中行的各列数据
      首先在标签中声明@selection-change="handleSelectionChange"之后在script中的methods当中编写该方法console.log(this.$refs.cgTable.selection);这一行代码可以获取你所选择的所有行this.idList=this.$refs.cgTable.selection.map((item)=>item.id);运用map获......
  • Vue脚手架分析
    1创建脚手架1、在目标目录创建vue脚手架。vuecreatevue_test。2、选择vue2版本。 3、创建成功4、运行5、使用浏览器查看 6、停止工程crtl+c停止工程。  2目录分析 ......