位置: 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技术原理、行业现状、投资前景(一万字综述怎么写)

  • 个人是否可以申请精神司法鉴定
  • 为什么增值税不计入营业税金及附加
  • 税务定税按什么标准
  • 为员工集中购买医疗保险
  • 个人转款到对公账户会计分录
  • 企业所得税申报时间
  • 关联交易所得税规定
  • 贴现利息支付方式
  • 预收账款确认收入会计分录
  • 购买商品赠送
  • 补提企业所得税会计分录
  • 被合并企业评估什么意思
  • 经营性租赁购入会计分录
  • 增值税农产品抵扣政策
  • 7月1日起,自开农产品收购发票,抵扣税率是多少?
  • 增长率的六个公式
  • 增值税发票复印件
  • 消费税的计算公式推导过程
  • 冲账与挂账之间有什么区别?
  • 查账征收改为核定征收需要什么资料
  • 政府发放的稳岗补贴怎么做账
  • 城建税上月少计提本月怎么做账
  • win11正式版发布
  • 网页打不开是什么
  • 少数股东持股比例
  • 收到一张餐饮费发票怎么入账
  • linux系统添加静态路由命令
  • 职工教育经费超过可以结转以后年度怎么做账
  • 怎么登记总分类账簿
  • 交易性金融资产属于什么科目
  • 金鱼花的养殖方法与注意事项
  • PHP简单实现HTTP和HTTPS跨域共享session解决办法
  • 供热企业税收优惠政策
  • 合并报表内部交易顺流逆流
  • err03 failed to
  • ci框架中新建的控制器取不到session
  • 深入分析php优化模型
  • 前端网页设计的三大技术
  • redis主从复制如何保证不丢失数据
  • sed命令大全
  • 滴滴出行发票税率是多少
  • 收到专票怎么入账
  • js array()
  • ps调色的作用
  • mysqldump导入数据库
  • 无锡政府回购安置房
  • 本期数值与去年同期数值之差称为什么
  • 一般纳税人领票提交什么资料
  • 开发票货款未公对公转如何做账?
  • 合同分三次付款怎么写
  • 个人承包工程如何缴纳税款
  • 资本公积只能转现金吗
  • 政府补贴收入确认政策
  • 固定资产的特点有哪几个
  • 流动资产周转天数下降说明什么
  • 营业收入是利润总额吗
  • 史上最简单的飞镖
  • oracle教程入门
  • sql server 不存在或者拒绝访问
  • 如何解决女性漏尿问题
  • linux常用帮助命令
  • Freebsd7.0 Apache2.2+MySQL5+PHP5安装和配置方法
  • 超级简单的方法
  • linux软件安装在哪个文件夹
  • WIN XP下VMware Tools(虚拟机)安装的详细方法(图文教程)
  • 升级win10系统后安装谷歌打不开
  • cocoscreator lua
  • 简单实现多彩慕斯蛋糕淋面的方法
  • python ftps
  • Web Inspector:关于在 Sublime Text 中调试Js的介绍
  • 迄今最好的Http请求框架
  • python cx_Oracle模块的安装和使用详细介绍
  • unity arkit
  • 自定义圆角控件
  • jQuery插件封装时如要实现链式编程,需要
  • Android之Notification
  • javascript原理详解
  • 土地增值税税率表
  • 小规模纳税人怎么申报纳税
  • 2022年各大省份录取分数线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设