位置: IT常识 - 正文

快速搞懂Pinia及数据持久化存储(详细教程)

编辑:rootadmin
快速搞懂Pinia及数据持久化存储(详细教程) 一.安装及使用Pinia

推荐整理分享快速搞懂Pinia及数据持久化存储(详细教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

1.安装Pinia两种方式都可,根据个人习惯来

npm install piniayarn add pinia

2.在main.ts 中引入并挂载到根实例

// src/main.tsimport { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'// 创建Vue应用实例// 实例化 Pinia// 以插件形式挂载Pinia实例createApp(App).use(createPinia()).mount('#app')

3.src目录下新建store/study/index.js并写入

Store 是用defineStore()定义的,它的第一个参数是一个独一无二的id,也是必须传入的,Pinia 将用它来连接 store 和 devtools。

defineStore()第二个参数可接受两类值:Setup函数或Options对象

state 属性: 用来存储全局的状态的,这里边定义的,就可以是为SPA里全局的状态了。

getters属性:用来监视或者说是计算状态的变化的,有缓存的功能。

actions属性:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。

第一种Options式写法:

import { defineStore } from 'pinia'// `defineStore()` 的返回值命名最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾export const useStudyStore = defineStore('studyId', { state: () => { return { counter: 0, } }, getters:{}, actions:{}})

在Options式中:Store 的数据(data),getters 是 Store 的计算属性(computed),而actions则是 Store 的方法(methods)。

快速搞懂Pinia及数据持久化存储(详细教程)

第二种Setup式写法:

import { defineStore } from 'pinia'// `defineStore()` 的返回值命名最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾export const useStudyStore = defineStore('studyId', ()=>{ const count = ref(0) const name = ref('Ghmin') const computedTest= computed(() => count.value * 99) function int() { count.value++ } return { count, name, computedTest, int}})

在Setup式中:ref()成为state属性,computed()变成getters,function变成actions

4.使用Store

使用上面两种方式其中一种后,便可以在组件中使用Store了。

<script setup>import { useStudyStore } from '@/stores/study'const store = useStudyStore();</script>二.具体使用及属性与方法

1.定义数据

import { defineStore } from 'pinia'export const useStudyStore = defineStore('studyId', { state: () => { return { name: 'Ghmin', num:0 } },})

2.组件中使用

<template><div><h1>vue组件</h1>{{ name }}</div></template><script setup>import { useStudyStore } from '@/stores/study'const store = useStudyStore();let { name } = store;</script>

注:pinia可以直接修改state数据,无需像vuex一样通过mutations才可以修改,所以上面的let { name } = store 这种解构是不推荐的,因为它破坏了响应性。

而为了从 Store 中提取属性,同时保持其响应性,这里需要使用storeToRefs(),它将为每个响应性属性创建引用。当你只使用 Store 的状态而不调用任何action时,它会非常有用。使用方法如下

<template><div><h1>vue组件</h1>{{ name }}</div></template><script setup>//这里需要先引入import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudyStore();//这样解构的属性将保持响应性let { name } = storeToRefs(store);// name.value 可以直接修改到Store中存储的值</script>

如果有多条数据要更新状态,推荐使用$patch方式更新。因为Pinia的官方网站,已经明确表示$ patch的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。

<template><div><h1>A组件</h1>{{ num}}{{ arr }}<button @click='btn'>按钮</button></div></template><script setup>import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudySlet { num,arr } = storeToRefs(store);const btn = ()=>{//批量更新store.$patch(state=>{state.num++;state.arr.push({name:'Ghmin'});})}</script>

actions:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。

import { defineStore } from 'pinia'export const useStudyStore = defineStore('studyId', { state: () => { return { num: 0 } }, getters:{}, actions:{ changeNum( val ){ this.num+= val; } }})<template><div><h1>使用actions</h1>{{ num}}<button @click='add'>加99</button></div></template><script setup>import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudyStore();let { num} = storeToRefs(store);const add = ()=>{store.changeNum(10);}</script>

getters:和vuex的getters几乎类似,用来监视或者说是计算状态的变化的,有缓存的功能。

import { defineStore } from 'pinia'export const useStudyStore = defineStore('studyId', { state: () => { return { num: 0, } }, getters:{ numGetters(){ return this.counter + 999; } }, actions:{}})<template><div> <h1>getters的使用</h1>{{ num}}{{ numGetters}}</div></template><script setup>import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudyStore();let { num,numGetters} = storeToRefs(store);</script>

三.数据持久化存储

使用pinia-plugin-persist实现数据持久化存储,具体使用请跳转Pinia持久化存储

http://t.csdn.cn/N8l9c

本文链接地址:https://www.jiuchutong.com/zhishi/297555.html 转载请保留说明!

上一篇:利用openpose提取自建数据集骨骼点训练st-gcn,复现st-gcn(openpose的输出)

下一篇:万字综述梳理ChatGPT----一文搞懂弄潮儿ChatGPT技术原理、行业现状、投资前景(一万字综述怎么写)

  • iqoo8怎么切换经典桌面(iqoo neo 855怎么切换经典桌面)

    iqoo8怎么切换经典桌面(iqoo neo 855怎么切换经典桌面)

  • 华为mate30pro可以分屏吗(华为mate30pro可以用120w充电器吗)

    华为mate30pro可以分屏吗(华为mate30pro可以用120w充电器吗)

  • 抖音撤回消息对方会有提示吗(抖音撤回消息对方会收到提醒吗)

    抖音撤回消息对方会有提示吗(抖音撤回消息对方会收到提醒吗)

  • 手机老是有外地的骚扰电话怎么办(手机老是有外地电话打进来)

    手机老是有外地的骚扰电话怎么办(手机老是有外地电话打进来)

  • 小米9打开短信闪退(小米打开短信无法滑动页面怎么办)

    小米9打开短信闪退(小米打开短信无法滑动页面怎么办)

  • 苹果xsmax前置呼吸灯怎么设置(iphonexs前置呼吸灯怎么亮)

    苹果xsmax前置呼吸灯怎么设置(iphonexs前置呼吸灯怎么亮)

  • 微信怎么不让别人拉我进群(微信怎么不让别人加我为好友)

    微信怎么不让别人拉我进群(微信怎么不让别人加我为好友)

  • qq会员特权

    qq会员特权

  • qq长期不绑定手机号会怎样(qq号不绑定手机号会被系统收回吗)

    qq长期不绑定手机号会怎样(qq号不绑定手机号会被系统收回吗)

  • 魅族发布会时间(魅族发布会最多的一年)

    魅族发布会时间(魅族发布会最多的一年)

  • 支付宝可以视频聊天吗(支付宝可以视频扫脸吗)

    支付宝可以视频聊天吗(支付宝可以视频扫脸吗)

  • 怎样看自己的邮箱号(怎样看自己的邮箱地址手机)

    怎样看自己的邮箱号(怎样看自己的邮箱地址手机)

  • m612q是魅族哪个型号(魅族m612c是什么版本)

    m612q是魅族哪个型号(魅族m612c是什么版本)

  • 华为mate30充满电显示什么(华为mate30充满电需要多少毫安)

    华为mate30充满电显示什么(华为mate30充满电需要多少毫安)

  • html全称是什么(html的全称)

    html全称是什么(html的全称)

  • ipadair3充电慢是什么原因(ipad air充电慢)

    ipadair3充电慢是什么原因(ipad air充电慢)

  • word封面文字竖排居中(word封面文字竖排居中间距)

    word封面文字竖排居中(word封面文字竖排居中间距)

  • 手机怎么传邮件(手机怎么传邮件添加附件)

    手机怎么传邮件(手机怎么传邮件添加附件)

  • 手机有声音却黑屏怎办(手机有声音却黑屏怎么办)

    手机有声音却黑屏怎办(手机有声音却黑屏怎么办)

  • 微信退群怎么还有消息(微信退群了群里还有你的信息吗)

    微信退群怎么还有消息(微信退群了群里还有你的信息吗)

  • 慕课上的课件怎样打印(慕课的课件怎么导出ppt)

    慕课上的课件怎样打印(慕课的课件怎么导出ppt)

  • 实达打印机怎么安装(实达打印机怎么设置打印纸)

    实达打印机怎么安装(实达打印机怎么设置打印纸)

  • 苹果11有多大(苹果11有多大尺寸)

    苹果11有多大(苹果11有多大尺寸)

  • 电脑高级模式怎么退出(电脑高级模式怎么退出视频教程)

    电脑高级模式怎么退出(电脑高级模式怎么退出视频教程)

  • 微信满屏我爱你怎么发(微信满屏我爱你代码)

    微信满屏我爱你怎么发(微信满屏我爱你代码)

  • 微信是什么啊(微信是什么东西?)

    微信是什么啊(微信是什么东西?)

  • win10电源选项在哪(win10电脑电源选项怎样设置最好)

    win10电源选项在哪(win10电脑电源选项怎样设置最好)

  • VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学(vue使用render)

    VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学(vue使用render)

  • 购销合同印花税计税金额含税吗
  • 税金及附加属于营业成本吗
  • 零售化妆品交什么税种
  • 土地增值税计入固定资产清理
  • 委托加工物资需要计提存货跌价准备吗
  • 农产品加工需要交税吗
  • 运输费计入原材料成本吗
  • 企业进行税收筹划
  • 差额事业单位的工资是由财政开支吗
  • 养牛需要活动场地吗
  • 公司车辆可以一年一检吗
  • 劳务费属于会计什么科目
  • 个人公积金公司这178,个人交多少
  • 属于项目的一个实例
  • 政策性退税流程
  • vue+element-ui项目
  • 未结算未取得发票怎么办
  • 购买性支出和转移性支出的本质区别
  • 对外支付企业所得税计税依据
  • 如何收取会员会费才合法
  • 以前年度应扣未扣支出专项申报表
  • centos-6.5-i386-bin-dvd1.iso
  • 运输费属于燃料费用吗
  • php正则函数内容匹配
  • 差旅费住宿费专票抵扣联贴在哪里
  • vue路由传参的几种方式
  • 知识图谱的构建方法有两种
  • css基础入门
  • php 自定义函数
  • 软件增值税即征即退网上备案
  • 残疾人保障金计入哪个会计科目
  • 坏账准备的会计分录怎么写
  • 帝国cms文件夹介绍
  • C++ lower_bound/upper_bound用法解析
  • mysql行锁的作用
  • 税务局退的税款如何做账
  • 采购货物没有发票开出去有发票有什么风险
  • 政府补助的相关法律法规
  • 残疾人就业保障金上年职工工资总额
  • 深圳税务2021
  • 未开票收入是怎么算的
  • 预包装销售是什么意思
  • 苗圃的账务处理
  • 未付货款尾款会计分录
  • 长期股权投资在现金流量表哪里体现
  • 搞活动的现金红包怎么用
  • 国税地税发票样式区别
  • 企业购车购置税怎么算
  • 销售返利怎么做税务处理
  • 印花税减免额不能为零怎么填
  • 生产经营年度汇算清缴
  • 开发票时怎么操作收款人 复核人 开票人?
  • 根据企业
  • Linq to SQL 插入数据时的一个问题
  • xp系统自带浏览器打不开网页
  • os x10.10.4beta6下载地址 os x10.10.4beta6官方下载网址
  • switcher.exe - switcher是什么进程
  • 进程aissca.exe
  • win102020h2版本
  • 微软账号重新登录
  • window八
  • 如何在linux中安装软件
  • win7系统运行红警黑屏有声音
  • 简单阐述javascript的主要作用
  • unity xcode
  • python中的字典与列表属于什么类型
  • unity触摸屏控件
  • sell脚本
  • unity3d官方案例
  • unity3d asset store
  • unity获取物体位置代码
  • jquery课程内容总结
  • html5table
  • 发票在国家税务总局网站查不到能用吗
  • 中奖个人所得税扣除标准
  • 发票上的税务号
  • 青岛崂山区税务局官网
  • 电子税务局里怎么删除购票员
  • 应聘保险公司需要了解什么
  • 本科毕业去上海找什么工作好
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设